diff --git a/editor/components/app-runner/vanilla-app-runner.tsx b/editor/components/app-runner/vanilla-app-runner.tsx
index c3fab11a..eb646acb 100644
--- a/editor/components/app-runner/vanilla-app-runner.tsx
+++ b/editor/components/app-runner/vanilla-app-runner.tsx
@@ -82,7 +82,7 @@ export function VanillaRunner({
     <iframe
       ref={ref}
       style={style}
-      sandbox="allow-same-origin"
+      sandbox="allow-same-origin allow-scripts"
       srcDoc={inlinesource}
       width={width}
       height={height}
diff --git a/externals/reflect-core b/externals/reflect-core
index 2b4fd615..e3c0523b 160000
--- a/externals/reflect-core
+++ b/externals/reflect-core
@@ -1 +1 @@
-Subproject commit 2b4fd6153dbc3b01e59c0a5399ba080cdb9ce139
+Subproject commit e3c0523bdee90aaad8beb2f92807bbd1f8ab40db
diff --git a/packages/builder-web-core/widgets-native/html-iframe-figma/index.ts b/packages/builder-web-core/widgets-native/html-iframe-figma/index.ts
new file mode 100644
index 00000000..64589a03
--- /dev/null
+++ b/packages/builder-web-core/widgets-native/html-iframe-figma/index.ts
@@ -0,0 +1,37 @@
+import { HtmlIframe } from "../html-iframe";
+import type { IIframeProps } from "../html-iframe";
+import type { IWHStyleWidget } from "@reflect-ui/core";
+import type { WidgetKey } from "../../widget-key";
+
+type FigmaProps = Omit<IIframeProps, "src" | "srcDoc"> & {
+  latlng: string;
+};
+
+export class HtmlIframeFigma extends HtmlIframe {
+  constructor({
+    key,
+    loading = "lazy",
+    allow = "fullscreen",
+    latlng,
+    ...rest
+  }: { key: WidgetKey } & FigmaProps & IWHStyleWidget) {
+    super({
+      key,
+      ...rest,
+      loading,
+      allow,
+      src: figmaurl(latlng),
+    });
+  }
+}
+
+function figmaurl(url: string): string {
+  const re =
+    /https:\/\/([\w\.-]+\.)?figma.com\/(file|proto)\/([0-9a-zA-Z]{22,128})(?:\/.*)?$/;
+  if (re.test(url)) {
+    return `https://www.figma.com/embed?embed_host=astra&url=${url}`;
+  } else {
+    return "https://figma.com/";
+    //
+  }
+}
diff --git a/packages/builder-web-core/widgets-native/html-iframe-googlemaps/index.ts b/packages/builder-web-core/widgets-native/html-iframe-googlemaps/index.ts
new file mode 100644
index 00000000..b91dbbdd
--- /dev/null
+++ b/packages/builder-web-core/widgets-native/html-iframe-googlemaps/index.ts
@@ -0,0 +1,46 @@
+import { HtmlIframe } from "../html-iframe";
+import type { IIframeProps } from "../html-iframe";
+import type { IWHStyleWidget } from "@reflect-ui/core";
+import type { WidgetKey } from "../../widget-key";
+
+type GoogleMapsProps = Omit<IIframeProps, "src" | "srcDoc"> & {
+  q: string;
+};
+
+export class HtmlIframeGoogleMaps extends HtmlIframe {
+  constructor({
+    key,
+    loading = "lazy",
+    referrerpolicy = "no-referrer-when-downgrade",
+    sandbox = "allow-scripts",
+    q,
+    ...rest
+  }: { key: WidgetKey } & GoogleMapsProps & IWHStyleWidget) {
+    super({
+      key,
+      ...rest,
+      loading,
+      sandbox,
+      referrerpolicy,
+      src: gmapurl(q),
+    });
+  }
+}
+
+function gmapurl(q: string, apikey?: string): string {
+  // build query param
+  const query = {};
+  query["q"] = q;
+  if (apikey) {
+    query["key"] = apikey;
+    return `https://www.google.com/maps/embed/v1/place?${buildq(query)}`;
+  } else {
+    query["output"] = "embed";
+    return `https://maps.google.com/maps?${buildq(query)}`;
+  }
+}
+
+const buildq = (q: object): string =>
+  Object.keys(q)
+    .map((k) => `${encodeURIComponent(k)}=${encodeURIComponent(q[k])}`)
+    .join("&");
diff --git a/packages/builder-web-core/widgets-native/html-iframe-osm/index.ts b/packages/builder-web-core/widgets-native/html-iframe-osm/index.ts
new file mode 100644
index 00000000..20dda31c
--- /dev/null
+++ b/packages/builder-web-core/widgets-native/html-iframe-osm/index.ts
@@ -0,0 +1,31 @@
+import { HtmlIframe } from "../html-iframe";
+import type { IIframeProps } from "../html-iframe";
+import type { IWHStyleWidget } from "@reflect-ui/core";
+import type { WidgetKey } from "../../widget-key";
+
+type OsmProps = Omit<IIframeProps, "src" | "srcDoc"> & {
+  latlng: string;
+};
+
+export class HtmlIframeOpenStreetMap extends HtmlIframe {
+  constructor({
+    key,
+    loading = "lazy",
+    referrerpolicy = "no-referrer-when-downgrade",
+    latlng,
+    ...rest
+  }: { key: WidgetKey } & OsmProps & IWHStyleWidget) {
+    super({
+      key,
+      ...rest,
+      loading,
+      referrerpolicy,
+      src: osmurl(latlng),
+    });
+  }
+}
+
+function osmurl(latlng: string | { lat: number; lng: number }): string {
+  const p = typeof latlng === "string" ? latlng : `${latlng.lat},${latlng.lng}`;
+  return `https://www.openstreetmap.org/export/embed.html?bbox=${p}`;
+}
diff --git a/packages/builder-web-core/widgets-native/html-iframe-webcam/index.ts b/packages/builder-web-core/widgets-native/html-iframe-webcam/index.ts
new file mode 100644
index 00000000..af8ef46a
--- /dev/null
+++ b/packages/builder-web-core/widgets-native/html-iframe-webcam/index.ts
@@ -0,0 +1,29 @@
+import { HtmlIframe } from "../html-iframe";
+import type { IIframeProps } from "../html-iframe";
+import type { IWHStyleWidget } from "@reflect-ui/core";
+import type { WidgetKey } from "../../widget-key";
+
+const webcamurl = "https://frames-appbox.vercel.app/webcam";
+
+type WebcamProps = Omit<IIframeProps, "src" | "srcDoc"> & {};
+
+export class HtmlIframeWebcam extends HtmlIframe {
+  constructor({
+    key,
+    allow = "camera",
+    loading = "lazy",
+    referrerpolicy = "no-referrer-when-downgrade",
+    sandbox = ["allow-scripts", "allow-same-origin"],
+    ...rest
+  }: { key: WidgetKey } & WebcamProps & IWHStyleWidget) {
+    super({
+      key,
+      ...rest,
+      allow,
+      loading,
+      sandbox,
+      referrerpolicy,
+      src: webcamurl,
+    });
+  }
+}
diff --git a/packages/builder-web-core/widgets-native/html-iframe-youtube/index.ts b/packages/builder-web-core/widgets-native/html-iframe-youtube/index.ts
new file mode 100644
index 00000000..bc80fdde
--- /dev/null
+++ b/packages/builder-web-core/widgets-native/html-iframe-youtube/index.ts
@@ -0,0 +1,32 @@
+import { HtmlIframe } from "../html-iframe";
+import type { IIframeProps } from "../html-iframe";
+import type { IWHStyleWidget } from "@reflect-ui/core";
+import type { WidgetKey } from "../../widget-key";
+
+type YoutubeProps = Omit<IIframeProps, "src" | "srcDoc"> & {
+  video: string;
+};
+
+export class HtmlIframeYoutube extends HtmlIframe {
+  constructor({
+    key,
+    loading = "lazy",
+    referrerpolicy = "no-referrer-when-downgrade",
+    sandbox = ["allow-scripts", "allow-same-origin"],
+    video,
+    ...rest
+  }: { key: WidgetKey } & YoutubeProps & IWHStyleWidget) {
+    super({
+      key,
+      ...rest,
+      loading,
+      sandbox,
+      referrerpolicy,
+      src: yturl(video),
+    });
+  }
+}
+
+function yturl(video: string): string {
+  return `https://www.youtube.com/embed/${video}`;
+}
diff --git a/packages/builder-web-core/widgets-native/html-iframe/index.ts b/packages/builder-web-core/widgets-native/html-iframe/index.ts
new file mode 100644
index 00000000..6427807f
--- /dev/null
+++ b/packages/builder-web-core/widgets-native/html-iframe/index.ts
@@ -0,0 +1,167 @@
+import type { ElementCssStyleData } from "@coli.codes/css";
+import type { DimensionLength, IWHStyleWidget } from "@reflect-ui/core";
+import { WidgetKey } from "../../widget-key";
+import type { StylableJSXElementConfig } from "../../widget-core";
+import { Container } from "../container";
+import * as css from "@web-builder/styles";
+import { JSX, JSXAttribute, StringLiteral } from "coli";
+
+type IframeAttrSandbox =
+  | "allow-downloads-without-user-activation"
+  | "allow-downloads"
+  | "allow-forms"
+  | "allow-modals"
+  | "allow-orientation-lock"
+  | "allow-pointer-lock"
+  | "allow-popups"
+  | "allow-popups-to-escape-sandbox"
+  | "allow-presentation"
+  | "allow-same-origin"
+  | "allow-scripts"
+  | "allow-storage-access-by-user-activation"
+  | "allow-top-navigation"
+  | "allow-top-navigation-by-user-activation";
+
+type IframeAttrReferrerPolicy =
+  | "no-referrer"
+  | "no-referrer-when-downgrade"
+  | "origin"
+  | "origin-when-cross-origin"
+  | "same-origin"
+  | "strict-origin"
+  | "strict-origin-when-cross-origin"
+  | "unsafe-url";
+
+export interface IIframeProps {
+  readonly id?: string;
+  readonly title?: string;
+
+  readonly src?: string;
+  readonly srcdoc?: string;
+  readonly fwidth?: DimensionLength;
+  readonly fheight?: DimensionLength;
+
+  readonly allow?: string;
+  readonly loading?: "eager" | "lazy";
+  readonly name?: string;
+  readonly referrerpolicy?: IframeAttrReferrerPolicy;
+  readonly sandbox?: IframeAttrSandbox | ReadonlyArray<IframeAttrSandbox>;
+}
+
+export class HtmlIframe extends Container implements IIframeProps {
+  readonly id?: string;
+  readonly title?: string;
+
+  readonly src?: string;
+  readonly srcdoc?: string;
+  readonly fwidth?: DimensionLength;
+  readonly fheight?: DimensionLength;
+
+  readonly allow?: string;
+  readonly loading?: "eager" | "lazy";
+  readonly name?: string;
+  readonly referrerpolicy?: IframeAttrReferrerPolicy;
+  readonly sandbox?: IframeAttrSandbox | ReadonlyArray<IframeAttrSandbox>;
+
+  constructor({
+    key,
+    id,
+    title,
+    src,
+    srcdoc,
+    fwidth,
+    fheight,
+    allow,
+    loading,
+    name,
+    referrerpolicy,
+    sandbox,
+    ...rest
+  }: { key: WidgetKey } & IIframeProps & IWHStyleWidget) {
+    super({ key, ...rest });
+
+    this.id = id;
+    this.title = title;
+    this.src = src;
+    this.srcdoc = srcdoc;
+    this.fwidth = fwidth;
+    this.fheight = fheight;
+    this.allow = allow;
+    this.loading = loading;
+    this.name = name;
+    this.referrerpolicy = referrerpolicy;
+    this.sandbox = sandbox;
+  }
+  //
+
+  styleData(): ElementCssStyleData {
+    const containerstyle = super.styleData();
+
+    return {
+      // general layouts, continer ---------------------
+      ...containerstyle,
+      // -------------------------------------------------
+
+      /* Override default CSS styles */
+      border: containerstyle.border ?? "none",
+      overflow: containerstyle.overflow ?? "hidden",
+      /* --------------------------- */
+
+      // ----------------------
+    };
+  }
+
+  jsxConfig(): StylableJSXElementConfig {
+    const attrs = [
+      this.id && new JSXAttribute("id", new StringLiteral(this.id)),
+      this.title && new JSXAttribute("title", new StringLiteral(this.title)),
+      this.src && new JSXAttribute("src", new StringLiteral(this.src)),
+      this.srcdoc && new JSXAttribute("srcdoc", new StringLiteral(this.srcdoc)),
+
+      this.fwidth &&
+        new JSXAttribute("width", new StringLiteral(css.length(this.fwidth))),
+      this.fheight &&
+        new JSXAttribute("height", new StringLiteral(css.length(this.fheight))),
+
+      this.sandbox?.length > 0 &&
+        new JSXAttribute(
+          "sandbox",
+          new StringLiteral(
+            Array.isArray(this.sandbox)
+              ? this.sandbox.join(" ")
+              : (this.sandbox as string)
+          )
+        ),
+
+      this.allow && new JSXAttribute("allow", new StringLiteral(this.allow)),
+    ].filter(Boolean);
+
+    return <StylableJSXElementConfig>{
+      type: "tag-and-attr",
+      tag: JSX.identifier("iframe"),
+      attributes: attrs,
+    };
+  }
+
+  get finalStyle() {
+    const superstyl = super.finalStyle;
+
+    // width override. ------------------------------------------------------------------------------------------
+    // iframe element's width needs to be specified if the position is absolute and the left & right is specified.
+    let width = superstyl.width;
+    if (
+      width === undefined &&
+      superstyl.position === "absolute" &&
+      superstyl.left !== undefined &&
+      superstyl.right !== undefined
+    ) {
+      width = "calc(100% - " + superstyl.left + " - " + superstyl.right + ")";
+    }
+    // ----------------------------------------------------------------------------------------------------------
+
+    return {
+      ...superstyl,
+      width,
+    };
+  }
+}
diff --git a/packages/builder-web-core/widgets-native/html-input/html-input-range.ts b/packages/builder-web-core/widgets-native/html-input/html-input-range.ts
index b6890f9a..403d572b 100644
--- a/packages/builder-web-core/widgets-native/html-input/html-input-range.ts
+++ b/packages/builder-web-core/widgets-native/html-input/html-input-range.ts
@@ -8,7 +8,7 @@ import type {
 import type { StylableJSXElementConfig } from "../../widget-core";
 import { WidgetKey } from "../../widget-key";
 import { Container } from "../container";
-import { JSX, JSXAttribute, NumericLiteral, StringLiteral } from "coli";
+import { JSX, JSXAttribute, StringLiteral } from "coli";
 import * as css from "@web-builder/styles";
 import { RoundSliderThumbShape } from "@reflect-ui/core/lib/slider.thumb";
 
diff --git a/packages/builder-web-core/widgets-native/html-progress/index.ts b/packages/builder-web-core/widgets-native/html-progress/index.ts
new file mode 100644
index 00000000..32f5817b
--- /dev/null
+++ b/packages/builder-web-core/widgets-native/html-progress/index.ts
@@ -0,0 +1,137 @@
+import type { ElementCssStyleData } from "@coli.codes/css";
+import type { Color, IWHStyleWidget } from "@reflect-ui/core";
+import { WidgetKey } from "../../widget-key";
+import type { StylableJSXElementConfig } from "../../widget-core";
+import { Container } from "../container";
+import * as css from "@web-builder/styles";
+import { IProgressIndicatorProps } from "@reflect-ui/core";
+import { JSX, JSXAttribute, StringLiteral } from "coli";
+
+/**
+ * <progress>
+ *
+ *
+ * @see
+ * - [html#progress](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress)
+ */
+export class Progress extends Container implements IProgressIndicatorProps {
+  _type = "progress";
+
+  value?: number;
+  backgroundColor?: Color;
+  color?: Color;
+  minHeight?: number;
+  semanticsLabel?: string;
+
+  constructor({
+    key,
+
+    value,
+    backgroundColor,
+    color,
+    minHeight,
+    semanticsLabel,
+
+    ...rest
+  }: {
+    key: WidgetKey;
+  } & IProgressIndicatorProps &
+    IWHStyleWidget) {
+    super({ key, ...rest });
+
+    this.value = value;
+    this.backgroundColor = backgroundColor;
+    this.color = color;
+    this.minHeight = minHeight;
+    this.semanticsLabel = semanticsLabel;
+  }
+
+  get indeterminate() {
+    return this.value <= 0;
+  }
+
+  styleData(): ElementCssStyleData {
+    const containerstyle = super.styleData();
+
+    if (this.indeterminate) {
+      return {
+        // general layouts, continer ---------------------
+        ...containerstyle,
+        // -------------------------------------------------
+
+        "border-radius": undefined, // clear to use default appearance
+        "background-color": undefined, // clear to use default appearance
+
+        // general slider styles
+        "accent-color": css.color(this.color),
+      };
+    }
+
+    // TODO: add styling
+    return {
+      // general layouts, continer ---------------------
+      ...containerstyle,
+      // -------------------------------------------------
+
+      /* Override default CSS styles */
+      "-webkit-appearance": "none",
+      appearance: "none",
+      /* --------------------------- */
+
+      // general slider styles
+      "accent-color": css.color(this.color),
+
+      "::-webkit-progress-bar": {
+        "background-color": css.color(this.backgroundColor),
+        ...css.borderRadius(this.borderRadius),
+      },
+
+      "::-webkit-progress-value": {
+        "background-color": css.color(this.color),
+        ...css.borderRadius(this.borderRadius),
+      },
+
+      // ----------------------
+    };
+  }
+
+  jsxConfig(): StylableJSXElementConfig {
+    const attrs = [
+      this.indeterminate
+        ? undefined
+        : new JSXAttribute("value", new StringLiteral(this.value.toString())),
+      // this.min &&
+      //   new JSXAttribute("min", new StringLiteral(this.min.toString())),
+      // this.max &&
+      //   new JSXAttribute("max", new StringLiteral(this.max.toString())),
+    ].filter(Boolean);
+
+    return <StylableJSXElementConfig>{
+      type: "tag-and-attr",
+      tag: JSX.identifier("progress"),
+      attributes: attrs,
+    };
+  }
+
+  get finalStyle() {
+    const superstyl = super.finalStyle;
+
+    // width override. ------------------------------------------------------------------------------------------
+    // input element's width needs to be specified if the position is absolute and the left & right is specified.
+    let width = superstyl.width;
+    if (
+      width === undefined &&
+      superstyl.position === "absolute" &&
+      superstyl.left !== undefined &&
+      superstyl.right !== undefined
+    ) {
+      width = "calc(100% - " + superstyl.left + " - " + superstyl.right + ")";
+    }
+    // ----------------------------------------------------------------------------------------------------------
+
+    return {
+      ...superstyl,
+      width,
+    };
+  }
+}
diff --git a/packages/builder-web-core/widgets-native/index.ts b/packages/builder-web-core/widgets-native/index.ts
index dfe67b16..a57935a0 100644
--- a/packages/builder-web-core/widgets-native/index.ts
+++ b/packages/builder-web-core/widgets-native/index.ts
@@ -7,7 +7,14 @@ export * from "./html-text-element";
 export * from "./html-svg";
 export * from "./html-image";
 export * from "./html-button";
+export * from "./html-progress";
 export * from "./html-input";
+export { HtmlIframe as Iframe } from "./html-iframe";
+export { HtmlIframeGoogleMaps as GoogleMaps } from "./html-iframe-googlemaps";
+export { HtmlIframeOpenStreetMap as OpenStreetMap } from "./html-iframe-osm";
+export { HtmlIframeYoutube as Youtube } from "./html-iframe-youtube";
+export { HtmlIframeFigma as EmbedFigma } from "./html-iframe-figma";
+export { HtmlIframeWebcam as Webcam } from "./html-iframe-webcam";
 export * from "./error-widget";
 
 export * from "@web-builder/core/widget-tree/widget";
diff --git a/packages/designto-token/main.ts b/packages/designto-token/main.ts
index 44ba6fde..770d45c7 100644
--- a/packages/designto-token/main.ts
+++ b/packages/designto-token/main.ts
@@ -150,32 +150,52 @@ function handleNode(
     return;
   }
 
+  let tokenizedTarget: Widget = null;
+
+  // flags handler
+  if (!tokenizedTarget) {
+    if (
+      !config.disable_flags_support &&
+      config.should_ignore_flag?.(node) !== true
+    ) {
+      try {
+        tokenizedTarget = flags_handling_gate(node);
+      } catch (e) {
+        console.error("error while interpreting flags.. skipping", e);
+      }
+    }
+  }
+
   // -------------------------------------------------------------------------
   // --------------------------- Detected tokens -----------------------------
   // -------------------------------------------------------------------------
 
   // - image - // image detection is always enabled exceptionally.
   // TODO: separate image detection with static logic based and the smart one.
-  const _detect_if_image = detectIf.image(node);
-  if (_detect_if_image.result) {
-    return tokenizeGraphics.fromImage(node, _detect_if_image.data);
+  if (!tokenizedTarget) {
+    const _detect_if_image = detectIf.image(node);
+    if (_detect_if_image.result) {
+      return tokenizeGraphics.fromImage(node, _detect_if_image.data);
+    }
   }
 
-  if (config.disable_detection) {
-    // skip detection
-  } else {
-    // - icon -
-    const _detect_if_icon = detectIf.icon(node);
-    if (_detect_if_icon.result) {
-      return tokenizeGraphics.fromIcon(node, _detect_if_icon.data);
-    }
+  if (!tokenizedTarget) {
+    if (config.disable_detection) {
+      // skip detection
+    } else {
+      // - icon -
+      const _detect_if_icon = detectIf.icon(node);
+      if (_detect_if_icon.result) {
+        return tokenizeGraphics.fromIcon(node, _detect_if_icon.data);
+      }
 
-    // - button -
-    // TODO: this causes confliction with flags
-    // const _detect_if_button = detectIf.button(node);
-    // if (_detect_if_button.result) {
-    //   return tokenizeButton.fromManifest(node, _detect_if_button.data);
-    // }
+      // - button -
+      // TODO: this causes confliction with flags
+      // const _detect_if_button = detectIf.button(node);
+      // if (_detect_if_button.result) {
+      //   return tokenizeButton.fromManifest(node, _detect_if_button.data);
+      // }
+    }
   }
   // -------------------------------------------------------------------------
   // --------------------------- Detected tokens -----------------------------
@@ -190,7 +210,7 @@ function handleNode(
   // -------------------------------------------------------------------------
   // --------------------------- Pre processors ------------------------------
   // -------------------------------------------------------------------------
-  let tokenizedTarget: Widget = null;
+
   // masking handler
   if (containsMasking(node)) {
     tokenizedTarget = tokenizeMasking.fromMultichild(
@@ -199,19 +219,6 @@ function handleNode(
     );
   }
 
-  // flags handler
-  if (!tokenizedTarget) {
-    if (
-      !config.disable_flags_support &&
-      config.should_ignore_flag?.(node) !== true
-    ) {
-      try {
-        tokenizedTarget = flags_handling_gate(node);
-      } catch (e) {
-        console.error("error while interpreting flags.. skipping", e);
-      }
-    }
-  }
   //
   // -------------------------------------------------------------------------
   //
diff --git a/packages/designto-token/support-flags/index.ts b/packages/designto-token/support-flags/index.ts
index 8209c7f2..6ed2bef6 100644
--- a/packages/designto-token/support-flags/index.ts
+++ b/packages/designto-token/support-flags/index.ts
@@ -16,6 +16,11 @@ import { tokenize_flagged_wh_declaration } from "./token-wh";
 import { tokenize_flagged_fix_wh } from "./token-wh-fix";
 import { tokenize_flagged_button } from "./token-button";
 import { tokenize_flagged_slider } from "./token-slider";
+import { tokenize_flagged_progress } from "./token-progress";
+
+import { tokenize_flagged_google_maps_view } from "./token-x-google-maps-view";
+import { tokenize_flagged_youtube_view } from "./token-x-youtube-view";
+import { tokenize_flagged_camera_view } from "./token-x-camera-display";
 
 export default function handleWithFlags(node: ReflectSceneNode) {
   const flags = parse(node.name);
@@ -56,8 +61,33 @@ function _handle_with_flags(node, flags: FlagsParseResult) {
   if (flags.__meta?.contains_slider_flag) {
     return tokenize_flagged_slider(node, flags[keys.flag_key__as_slider]);
   }
+
+  if (flags.__meta?.contains_progress_flag) {
+    return tokenize_flagged_progress(node, flags[keys.flag_key__as_progress]);
+  }
   // #endregion
 
+  // #region exetnded views
+  if (flags.__meta?.contains_x_google_maps_view_flag) {
+    return tokenize_flagged_google_maps_view(
+      node,
+      flags[keys.flag_key__x_google_maps_view]
+    );
+  }
+
+  if (flags.__meta?.contains_x_youtube_view_flag) {
+    return tokenize_flagged_youtube_view(
+      node,
+      flags[keys.flag_key__x_youtube_view]
+    );
+  }
+
+  if (flags.__meta?.contains_camera_flag) {
+    return tokenize_flagged_camera_view(node, flags[keys.flag_key__camera]);
+  }
+
+  // #end exetnded views
+
   // #region element altering flags
   // heading
   const heading_flag_alias =
diff --git a/packages/designto-token/support-flags/token-progress/index.ts b/packages/designto-token/support-flags/token-progress/index.ts
new file mode 100644
index 00000000..852d3349
--- /dev/null
+++ b/packages/designto-token/support-flags/token-progress/index.ts
@@ -0,0 +1,126 @@
+import { LinearProgressIndicator, Container, Colors } from "@reflect-ui/core";
+import type { AsProgressFlag } from "@code-features/flags/types";
+import type {
+  ReflectEllipseNode,
+  ReflectFrameNode,
+  ReflectRectangleNode,
+  ReflectSceneNode,
+} from "@design-sdk/figma-node";
+import { keyFromNode } from "../../key";
+import assert from "assert";
+import { tokenizeLayout } from "../../token-layout";
+import { unwrappedChild } from "../../wrappings";
+import { WrappingContainer } from "../../tokens";
+
+/**
+ *
+ */
+export function tokenize_flagged_progress(
+  node: ReflectSceneNode,
+  flag: AsProgressFlag
+): LinearProgressIndicator | WrappingContainer<LinearProgressIndicator> {
+  if (flag.value === false) return;
+
+  const validated = validate_progress(node);
+  if (validated.error === false) {
+    const _key = keyFromNode(node);
+
+    switch (validated.__type) {
+      case "frame-as-progress": {
+        const { root, value } = validated;
+
+        // TODO: use theme color as default if non available
+        const fallbackcolor = Colors.blue;
+
+        // initial value -----------------------------
+        const p_w = root.width;
+        const v_w = value?.width ?? 0;
+        // calculate percentage of value by its width, round to 2 decimal point
+        const _initial_value =
+          // if the value node is floating, it means it is indeterminate, -0
+          value.x <= 1
+            ? Math.round((v_w / p_w + Number.EPSILON) * 100) / 100
+            : -0;
+        // -------------------------------------------
+
+        // value x pos
+
+        // active color ------------------------------
+        const _activecolor = value?.primaryColor ?? fallbackcolor;
+        // -------------------------------------------
+
+        // bg color ----------------------------------
+        const _bgcolor = root.primaryColor ?? fallbackcolor;
+        // -------------------------------------------
+
+        const container = unwrappedChild(
+          tokenizeLayout.fromFrame(root, root.children, { is_root: false }, {})
+        ) as Container;
+
+        return new WrappingContainer({
+          ...container,
+          key: keyFromNode(node),
+          child: new LinearProgressIndicator({
+            key: _key,
+            // ...container,
+            backgroundColor: _bgcolor,
+            color: _activecolor,
+            value: _initial_value,
+          }),
+        });
+      }
+      default:
+        throw new Error(
+          `unexpected type while handling progress flag ${validated.__type}`
+        );
+    }
+  } else {
+    throw new Error(validated.error);
+  }
+}
+
+type ValueIndicatorAcceptableNode = ReflectFrameNode | ReflectRectangleNode;
+
+/**
+ * validate if layer casted as progress can be actually tokenized to progress.
+ *
+ * - when applyed to frame,
+ *    1. the root should be a long rect 1:1 < n
+ *    2. the height of the value should be n >= (height of the root)
+ *
+ */
+function validate_progress(node: ReflectSceneNode):
+  | {
+      __type: "frame-as-progress";
+      error: false;
+      root: ReflectFrameNode;
+      value?: ValueIndicatorAcceptableNode;
+    }
+  | { error: string } {
+  assert(!!node, "target must not be null or undefined");
+  switch (node.type) {
+    case "FRAME": {
+      // find the root of progress
+      // find the value of the progress
+
+      const root = node;
+
+      const value = node.grandchildren.find((n) => {
+        const _0 = n.type === "FRAME" || n.type === "RECTANGLE";
+        const _1 = n.width > 0 && n.height > 0;
+        const _2 = n.height === root.height;
+        const _3 = n.primaryColor !== root.primaryColor;
+        return _0 && _1 && _2 && _3;
+      });
+
+      return {
+        __type: "frame-as-progress",
+        root: root,
+        value: value as ValueIndicatorAcceptableNode,
+        error: false,
+      };
+    }
+    default:
+      return { error: "progress target is not a valid frame or a text node" };
+  }
+}
diff --git a/packages/designto-token/support-flags/token-slider/index.ts b/packages/designto-token/support-flags/token-slider/index.ts
index 7b8b916b..abffa078 100644
--- a/packages/designto-token/support-flags/token-slider/index.ts
+++ b/packages/designto-token/support-flags/token-slider/index.ts
@@ -15,20 +15,6 @@ import { WrappingContainer } from "../../tokens";
 
 /**
  *
- * from
- * ```
- * row|col[
- *  enabled text,
- *  other elements,
- * ]
- * ```
- *
- * to
- * ```
- * input {
- *  enabled text
- * }
- * ```
  */
 export function tokenize_flagged_slider(
   node: ReflectSceneNode,
@@ -111,16 +97,13 @@ type ThumbAcceptableNode =
 type ValueIndicatorAcceptableNode = ReflectFrameNode | ReflectRectangleNode;
 
 /**
- * validate if layer casted as input can be actually tokenized to input.
+ * validate if layer casted as slider can be actually tokenized to slider.
  *
  * - when applyed to frame,
- *    1. the root should be a flex
- *    2. the children should be a valid text node
+ *    1. the root should be a long rect 1:1 < n
+ *    2. the height of the value should be n >= (height of the root)
+ *    3. the knob should be 1:1 size w:h
  *
- * - when applyed to text,
- *    1. the text should be visible
- *    2. the text should be not empty
- * @param input
  */
 function validate_slider(node: ReflectSceneNode):
   | {
@@ -170,6 +153,6 @@ function validate_slider(node: ReflectSceneNode):
       };
     }
     default:
-      return { error: "input target is not a valid frame or a text node" };
+      return { error: "slider target is not a valid frame or a text node" };
   }
 }
diff --git a/packages/designto-token/support-flags/token-x-camera-display/index.ts b/packages/designto-token/support-flags/token-x-camera-display/index.ts
new file mode 100644
index 00000000..ee0d2af5
--- /dev/null
+++ b/packages/designto-token/support-flags/token-x-camera-display/index.ts
@@ -0,0 +1,59 @@
+import type {
+  ReflectFrameNode,
+  ReflectGroupNode,
+  ReflectRectangleNode,
+  ReflectSceneNode,
+} from "@design-sdk/figma-node";
+import type { Container } from "@reflect-ui/core";
+import { tokenizeLayout } from "../../token-layout";
+import { tokenizeContainer } from "../../token-container";
+import { unwrappedChild } from "../../wrappings";
+import type { CameraDisplayFlag } from "@code-features/flags";
+import { WrappingContainer, XCameraDisplayView } from "../../tokens";
+import assert from "assert";
+import { keyFromNode } from "../../key";
+
+export function tokenize_flagged_camera_view(
+  node: ReflectSceneNode,
+  flag: CameraDisplayFlag
+) {
+  if (!flag.value) {
+    return;
+  }
+
+  try {
+    node = validate_input(node);
+    const _key = keyFromNode(node);
+
+    const container = unwrappedChild(
+      node.type === "RECTANGLE"
+        ? tokenizeContainer.fromRectangle(node)
+        : tokenizeLayout.fromFrameOrGroup(node, [], { is_root: false }, {})
+    ) as Container;
+
+    return new WrappingContainer({
+      ...container,
+      key: keyFromNode(node),
+      child: new XCameraDisplayView({
+        key: _key,
+        ...container,
+      }),
+    });
+  } catch (e) {
+    throw new Error(`failed to tokenize camera display view: ${e.message}`);
+  }
+}
+
+type CameraDisplayCompatNodeType =
+  | ReflectFrameNode
+  | ReflectGroupNode
+  | ReflectRectangleNode;
+
+function validate_input(node: ReflectSceneNode): CameraDisplayCompatNodeType {
+  assert(
+    node.type === "FRAME" || node.type === "GROUP" || node.type === "RECTANGLE",
+    `camera display view target input must be a frame, group or rectangle, but "${node.type}" was given`
+  );
+
+  return node;
+}
diff --git a/packages/designto-token/support-flags/token-x-figma-embed-view/index.ts b/packages/designto-token/support-flags/token-x-figma-embed-view/index.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/designto-token/support-flags/token-x-google-maps-view/index.ts b/packages/designto-token/support-flags/token-x-google-maps-view/index.ts
new file mode 100644
index 00000000..a1356907
--- /dev/null
+++ b/packages/designto-token/support-flags/token-x-google-maps-view/index.ts
@@ -0,0 +1,57 @@
+import type {
+  ReflectFrameNode,
+  ReflectGroupNode,
+  ReflectRectangleNode,
+  ReflectSceneNode,
+} from "@design-sdk/figma-node";
+import type { Container } from "@reflect-ui/core";
+import { tokenizeLayout } from "../../token-layout";
+import { tokenizeContainer } from "../../token-container";
+import { unwrappedChild } from "../../wrappings";
+import type { XGoogleMapsFlag } from "@code-features/flags";
+import { WrappingContainer, XGoogleMapsView } from "../../tokens";
+import assert from "assert";
+import { keyFromNode } from "../../key";
+
+export function tokenize_flagged_google_maps_view(
+  node: ReflectSceneNode,
+  flag: XGoogleMapsFlag
+) {
+  try {
+    const q = flag.value;
+    node = validate_input(node);
+    const _key = keyFromNode(node);
+
+    const container = unwrappedChild(
+      node.type === "RECTANGLE"
+        ? tokenizeContainer.fromRectangle(node)
+        : tokenizeLayout.fromFrameOrGroup(node, [], { is_root: false }, {})
+    ) as Container;
+
+    return new WrappingContainer({
+      ...container,
+      key: keyFromNode(node),
+      child: new XGoogleMapsView({
+        key: _key,
+        ...container,
+        q: q,
+      }),
+    });
+  } catch (e) {
+    throw new Error(`failed to tokenize google maps view: ${e.message}`);
+  }
+}
+
+type GoogleMapsViewCompatNodeType =
+  | ReflectFrameNode
+  | ReflectGroupNode
+  | ReflectRectangleNode;
+
+function validate_input(node: ReflectSceneNode): GoogleMapsViewCompatNodeType {
+  assert(
+    node.type === "FRAME" || node.type === "GROUP" || node.type === "RECTANGLE",
+    `google maps view target input must be a frame, group or rectangle, but "${node.type}" was given`
+  );
+
+  return node;
+}
diff --git a/packages/designto-token/support-flags/token-x-youtube-view/index.ts b/packages/designto-token/support-flags/token-x-youtube-view/index.ts
new file mode 100644
index 00000000..0d9f17d7
--- /dev/null
+++ b/packages/designto-token/support-flags/token-x-youtube-view/index.ts
@@ -0,0 +1,57 @@
+import type {
+  ReflectFrameNode,
+  ReflectGroupNode,
+  ReflectRectangleNode,
+  ReflectSceneNode,
+} from "@design-sdk/figma-node";
+import type { Container } from "@reflect-ui/core";
+import { tokenizeLayout } from "../../token-layout";
+import { tokenizeContainer } from "../../token-container";
+import { unwrappedChild } from "../../wrappings";
+import type { XYoutubeFlag } from "@code-features/flags";
+import { WrappingContainer, XYoutubeView } from "../../tokens";
+import assert from "assert";
+import { keyFromNode } from "../../key";
+
+export function tokenize_flagged_youtube_view(
+  node: ReflectSceneNode,
+  flag: XYoutubeFlag
+) {
+  try {
+    const videoid = flag.value;
+    node = validate_input(node);
+    const _key = keyFromNode(node);
+
+    const container = unwrappedChild(
+      node.type === "RECTANGLE"
+        ? tokenizeContainer.fromRectangle(node)
+        : tokenizeLayout.fromFrameOrGroup(node, [], { is_root: false }, {})
+    ) as Container;
+
+    return new WrappingContainer({
+      ...container,
+      key: keyFromNode(node),
+      child: new XYoutubeView({
+        key: _key,
+        ...container,
+        video: videoid,
+      }),
+    });
+  } catch (e) {
+    throw new Error(`failed to tokenize google maps view: ${e.message}`);
+  }
+}
+
+type YoutubeViewCompatNodeType =
+  | ReflectFrameNode
+  | ReflectGroupNode
+  | ReflectRectangleNode;
+
+function validate_input(node: ReflectSceneNode): YoutubeViewCompatNodeType {
+  assert(
+    node.type === "FRAME" || node.type === "GROUP" || node.type === "RECTANGLE",
+    `youtube view target input must be a frame, group or rectangle, but "${node.type}" was given`
+  );
+
+  return node;
+}
diff --git a/packages/designto-token/tokens/index.ts b/packages/designto-token/tokens/index.ts
index 85cb96ea..7e08bc2e 100644
--- a/packages/designto-token/tokens/index.ts
+++ b/packages/designto-token/tokens/index.ts
@@ -1,2 +1,8 @@
 export * from "./stretched";
 export * from "./wrapping-container";
+
+export * from "./x-camera-display-view";
+export * from "./x-figma-embed-view";
+export * from "./x-google-maps-view";
+export * from "./x-osm-view";
+export * from "./x-youtube-view";
diff --git a/packages/designto-token/tokens/x-camera-display-view/index.ts b/packages/designto-token/tokens/x-camera-display-view/index.ts
new file mode 100644
index 00000000..28427a05
--- /dev/null
+++ b/packages/designto-token/tokens/x-camera-display-view/index.ts
@@ -0,0 +1,8 @@
+import { Container, WidgetKey } from "@reflect-ui/core";
+
+export class XCameraDisplayView extends Container {
+  readonly _type = "x/camera-display-view";
+  constructor({ key }: { key: WidgetKey } & {}) {
+    super({ key });
+  }
+}
diff --git a/packages/designto-token/tokens/x-figma-embed-view/index.ts b/packages/designto-token/tokens/x-figma-embed-view/index.ts
new file mode 100644
index 00000000..744870b9
--- /dev/null
+++ b/packages/designto-token/tokens/x-figma-embed-view/index.ts
@@ -0,0 +1,8 @@
+import { Container, Widget, WidgetKey } from "@reflect-ui/core";
+
+export class XFigmaEmbedView extends Container {
+  readonly _type = "x/figma-embed-view";
+  constructor({ key }: { key: WidgetKey }) {
+    super({ key });
+  }
+}
diff --git a/packages/designto-token/tokens/x-google-maps-view/index.ts b/packages/designto-token/tokens/x-google-maps-view/index.ts
new file mode 100644
index 00000000..b716536f
--- /dev/null
+++ b/packages/designto-token/tokens/x-google-maps-view/index.ts
@@ -0,0 +1,14 @@
+import { Container, WidgetKey } from "@reflect-ui/core";
+
+export class XGoogleMapsView extends Container {
+  readonly _type = "x/google-maps-view";
+  readonly q: string;
+  constructor({
+    key,
+    q = "Mountain View, California, United States", // default fallback
+  }: { key: WidgetKey } & { q?: string }) {
+    super({ key });
+
+    this.q = q;
+  }
+}
diff --git a/packages/designto-token/tokens/x-osm-view/index.ts b/packages/designto-token/tokens/x-osm-view/index.ts
new file mode 100644
index 00000000..890b4266
--- /dev/null
+++ b/packages/designto-token/tokens/x-osm-view/index.ts
@@ -0,0 +1,8 @@
+import { Container, Widget, WidgetKey } from "@reflect-ui/core";
+
+export class XOSMView extends Container {
+  readonly _type = "x/osm-view";
+  constructor({ key }: { key: WidgetKey }) {
+    super({ key });
+  }
+}
diff --git a/packages/designto-token/tokens/x-youtube-view/index.ts b/packages/designto-token/tokens/x-youtube-view/index.ts
new file mode 100644
index 00000000..9ff95c1a
--- /dev/null
+++ b/packages/designto-token/tokens/x-youtube-view/index.ts
@@ -0,0 +1,16 @@
+import { Widget, WidgetKey } from "@reflect-ui/core";
+
+export class XYoutubeView extends Widget {
+  readonly _type = "x/youtube-view";
+  readonly video: string;
+  constructor({
+    key,
+    video = "LOZuxwVk7TU", // placeholder video - toxic by Britney Spears
+  }: { key: WidgetKey } & {
+    video: string;
+  }) {
+    super({ key });
+
+    this.video = video;
+  }
+}
diff --git a/packages/designto-web/tokens-to-web-widget/compose-unwrapped-progress.ts b/packages/designto-web/tokens-to-web-widget/compose-unwrapped-progress.ts
new file mode 100644
index 00000000..5b00d3b3
--- /dev/null
+++ b/packages/designto-web/tokens-to-web-widget/compose-unwrapped-progress.ts
@@ -0,0 +1,22 @@
+import * as web from "@web-builder/core";
+import * as core from "@reflect-ui/core";
+
+export function compose_unwrapped_progress(
+  key,
+  widget: core.ProgressIndicator,
+  container?: Omit<core.Container, "minHeight">
+): web.Progress {
+  if (widget instanceof core.LinearProgressIndicator) {
+    return new web.Progress({
+      ...(container ?? {}),
+      ...widget,
+      key,
+    });
+  } else if (widget instanceof core.CircularProgressIndicator) {
+    throw new Error(
+      "circular progress indicator not supported natively by html"
+    );
+  } else {
+    throw new Error("unsupported progress indicator");
+  }
+}
diff --git a/packages/designto-web/tokens-to-web-widget/compose-xtended-views.ts b/packages/designto-web/tokens-to-web-widget/compose-xtended-views.ts
new file mode 100644
index 00000000..799f6a9a
--- /dev/null
+++ b/packages/designto-web/tokens-to-web-widget/compose-xtended-views.ts
@@ -0,0 +1,48 @@
+import * as core from "@reflect-ui/core";
+import * as web from "@web-builder/core";
+import { tokens as special } from "@designto/token";
+
+export function compose_xtended_views(
+  key,
+  widget:
+    | special.XFigmaEmbedView
+    | special.XGoogleMapsView
+    | special.XOSMView
+    | special.XYoutubeView
+    | special.XCameraDisplayView,
+  container?: core.Container
+) {
+  if (widget instanceof special.XFigmaEmbedView) {
+    throw new Error("not implemented");
+  }
+
+  if (widget instanceof special.XGoogleMapsView) {
+    return new web.GoogleMaps({
+      ...(container ?? ({} as core.Container)),
+      ...widget,
+      key,
+    });
+  }
+
+  if (widget instanceof special.XOSMView) {
+    throw new Error("not implemented");
+  }
+
+  if (widget instanceof special.XYoutubeView) {
+    return new web.Youtube({
+      ...(container ?? ({} as core.Container)),
+      ...widget,
+      key,
+    });
+  }
+
+  if (widget instanceof special.XCameraDisplayView) {
+    return new web.Webcam({
+      ...(container ?? ({} as core.Container)),
+      ...widget,
+      key,
+    });
+  }
+
+  throw new Error("not implemented");
+}
diff --git a/packages/designto-web/tokens-to-web-widget/index.ts b/packages/designto-web/tokens-to-web-widget/index.ts
index ed6f993b..b75bb55c 100644
--- a/packages/designto-web/tokens-to-web-widget/index.ts
+++ b/packages/designto-web/tokens-to-web-widget/index.ts
@@ -18,7 +18,9 @@ import { compose_wrapped_with_expanded } from "./compose-wrapped-with-expanded";
 import { compose_unwrapped_text_input } from "./compose-unwrapped-text-field";
 import { compose_unwrapped_button } from "./compose-unwrapped-button";
 import { compose_unwrapped_slider } from "./compose-unwrapped-slider";
+import { compose_unwrapped_progress } from "./compose-unwrapped-progress";
 import { compose_instanciation } from "./compose-instanciation";
+import { compose_xtended_views } from "./compose-xtended-views";
 import { IWHStyleWidget } from "@reflect-ui/core";
 import * as reusable from "@code-features/component/tokens";
 import assert from "assert";
@@ -223,6 +225,15 @@ function compose<T extends JsxWidget>(
         break;
       }
     }
+  } else if (
+    widget instanceof special.XFigmaEmbedView ||
+    widget instanceof special.XGoogleMapsView ||
+    widget instanceof special.XOSMView ||
+    widget instanceof special.XYoutubeView ||
+    widget instanceof special.XCameraDisplayView
+  ) {
+    // xtended views
+    thisWebWidget = compose_xtended_views(_key, widget);
   }
 
   // #region component widgets
@@ -234,9 +245,16 @@ function compose<T extends JsxWidget>(
   // textfield
   else if (widget instanceof core.TextField) {
     thisWebWidget = compose_unwrapped_text_input(_key, widget);
-  } else if (widget instanceof core.Slider) {
+  }
+  // slider
+  else if (widget instanceof core.Slider) {
     thisWebWidget = compose_unwrapped_slider(_key, widget);
   }
+  // progress
+  else if (widget instanceof core.ProgressIndicator) {
+    thisWebWidget = compose_unwrapped_progress(_key, widget);
+  }
+
   // wrapping container
   else if (widget instanceof WrappingContainer) {
     // #region
@@ -247,12 +265,28 @@ function compose<T extends JsxWidget>(
       thisWebWidget = compose_unwrapped_button(_key, widget.child, widget);
     } else if (widget.child instanceof core.Slider) {
       thisWebWidget = compose_unwrapped_slider(_key, widget.child, widget);
-    } else {
+    } else if (widget.child instanceof core.ProgressIndicator) {
+      thisWebWidget = compose_unwrapped_progress(_key, widget.child, widget);
+    }
+
+    // --- xtended views
+    else if (
+      widget.child instanceof special.XFigmaEmbedView ||
+      widget.child instanceof special.XGoogleMapsView ||
+      widget.child instanceof special.XOSMView ||
+      widget.child instanceof special.XYoutubeView ||
+      widget.child instanceof special.XCameraDisplayView
+    ) {
+      // xtended views
+      thisWebWidget = compose_xtended_views(_key, widget.child, widget);
+    }
+    // --- --- --- --- ---
+    // #endregion
+    else {
       throw new Error(
-        `Unsupported widget type: ${widget.child.constructor.name}`
+        `Unsupported web widget type: ${widget.child.constructor.name}`
       );
     }
-    // #endregion
   }
   // #endregion
 
diff --git a/packages/support-flags/--as-progress/index.ts b/packages/support-flags/--as-progress/index.ts
new file mode 100644
index 00000000..74e53f1c
--- /dev/null
+++ b/packages/support-flags/--as-progress/index.ts
@@ -0,0 +1,24 @@
+// priamry
+export const flag_key__as_progress = "as-progress" as const;
+// alias
+const flag_key__as_progress_bar = "as-progress-bar" as const;
+const flag_key__as_loading = "as-loading" as const;
+const flag_key__as_loading_bar = "as-loading-bar" as const;
+
+export const flag_key_alias__as_progress = [
+  flag_key__as_progress,
+  flag_key__as_progress_bar,
+  flag_key__as_loading,
+  flag_key__as_loading_bar,
+];
+
+export interface AsProgressFlag {
+  flag:
+    | typeof flag_key__as_progress
+    | typeof flag_key__as_progress_bar
+    | typeof flag_key__as_loading
+    | typeof flag_key__as_loading_bar;
+
+  value: boolean;
+  _raw?: string;
+}
diff --git a/packages/support-flags/--camera-display/index.ts b/packages/support-flags/--camera-display/index.ts
new file mode 100644
index 00000000..328a1d62
--- /dev/null
+++ b/packages/support-flags/--camera-display/index.ts
@@ -0,0 +1,8 @@
+export const flag_key__camera = "camera";
+
+export const flag_key_alias__camera = [flag_key__camera];
+
+export interface CameraDisplayFlag {
+  flag: typeof flag_key__camera;
+  value: boolean;
+}
diff --git a/packages/support-flags/--latlng/index.ts b/packages/support-flags/--latlng/index.ts
new file mode 100644
index 00000000..f455fe0a
--- /dev/null
+++ b/packages/support-flags/--latlng/index.ts
@@ -0,0 +1,13 @@
+// primary
+export const flag_key__latlng = "latlng";
+// alias
+const flag_key__lat_lng = "lat-lng";
+
+export const flag_key_alias__max_height = [flag_key__latlng, flag_key__lat_lng];
+
+export interface LatLngFlag {
+  flag: typeof flag_key__latlng | typeof flag_key__lat_lng;
+
+  value: string;
+  _raw?: string;
+}
diff --git a/packages/support-flags/--q/index.ts b/packages/support-flags/--q/index.ts
new file mode 100644
index 00000000..32d03abf
--- /dev/null
+++ b/packages/support-flags/--q/index.ts
@@ -0,0 +1,10 @@
+// primary
+export const flag_key__q = "q";
+
+export const flag_key_alias__q = [flag_key__q];
+
+export interface QFlag {
+  flag: typeof flag_key__q;
+  value: string;
+  _raw?: string;
+}
diff --git a/packages/support-flags/--video/index.ts b/packages/support-flags/--video/index.ts
new file mode 100644
index 00000000..cefa3a0d
--- /dev/null
+++ b/packages/support-flags/--video/index.ts
@@ -0,0 +1,6 @@
+export const flag_key__video = "video";
+export const flag_key_alias__video = [flag_key__video];
+export interface VideoFlag {
+  flag: typeof flag_key__video;
+  value: string;
+}
diff --git a/packages/support-flags/--webview-src/README.md b/packages/support-flags/--webview/README.md
similarity index 100%
rename from packages/support-flags/--webview-src/README.md
rename to packages/support-flags/--webview/README.md
diff --git a/packages/support-flags/--webview/index.ts b/packages/support-flags/--webview/index.ts
new file mode 100644
index 00000000..b10c4b54
--- /dev/null
+++ b/packages/support-flags/--webview/index.ts
@@ -0,0 +1,6 @@
+export const flag_key__webview = "webview";
+export const flag_key_alias__webview = [flag_key__webview];
+export interface WebViewFlag {
+  flag: typeof flag_key__webview;
+  value: string;
+}
diff --git a/packages/support-flags/--x-figma-embed-view/index.ts b/packages/support-flags/--x-figma-embed-view/index.ts
new file mode 100644
index 00000000..41c80d95
--- /dev/null
+++ b/packages/support-flags/--x-figma-embed-view/index.ts
@@ -0,0 +1,25 @@
+// primary
+export const flag_key__x_figma_embed_view = "x-figma-embed-view";
+
+// alias
+const flag_key__x_figma_embed = "x-figma-embed";
+const flag_key__x_figma = "x-figma";
+const flag_key__figma_embed_view = "figma-embed-view";
+const flag_key__figma_embed = "figma-embed";
+
+export const flag_key_alias__x_figma_embed_view = [
+  flag_key__x_figma_embed_view,
+  flag_key__x_figma,
+  flag_key__figma_embed,
+  flag_key__figma_embed_view,
+];
+export interface XFigmaEmbedFlag {
+  flag:
+    | typeof flag_key__x_figma_embed_view
+    | typeof flag_key__x_figma_embed
+    | typeof flag_key__x_figma
+    | typeof flag_key__figma_embed
+    | typeof flag_key__figma_embed_view;
+  value: string;
+  raw?: string;
+}
diff --git a/packages/support-flags/--x-google-maps-view/index.ts b/packages/support-flags/--x-google-maps-view/index.ts
new file mode 100644
index 00000000..ae5e1097
--- /dev/null
+++ b/packages/support-flags/--x-google-maps-view/index.ts
@@ -0,0 +1,30 @@
+// primary
+export const flag_key__x_google_maps_view = "x-google-maps-view";
+
+// alias
+const flag_key__x_google_maps = "x-google-maps";
+const flag_key__x_google_map = "x-google-map";
+const flag_key__google_maps = "google-maps";
+const flag_key__google_map = "google-map";
+const flag_key__googlemaps = "googlemaps";
+const flag_key__googlemap = "googlemap";
+export const flag_key_alias__x_google_maps = [
+  flag_key__x_google_maps_view,
+  flag_key__x_google_map,
+  flag_key__google_maps,
+  flag_key__google_map,
+  flag_key__googlemaps,
+  flag_key__googlemap,
+];
+export interface XGoogleMapsFlag {
+  flag:
+    | typeof flag_key__x_google_maps_view
+    | typeof flag_key__x_google_maps
+    | typeof flag_key__x_google_map
+    | typeof flag_key__google_maps
+    | typeof flag_key__google_map
+    | typeof flag_key__googlemaps
+    | typeof flag_key__googlemap;
+  value: string;
+  raw?: string;
+}
diff --git a/packages/support-flags/--x-osm-view/index.ts b/packages/support-flags/--x-osm-view/index.ts
new file mode 100644
index 00000000..33b9d0e7
--- /dev/null
+++ b/packages/support-flags/--x-osm-view/index.ts
@@ -0,0 +1,16 @@
+// primary
+export const flag_key__x_osm_view = "x-osm-view";
+
+// alias
+const flag_key__x_osm = "x-osm";
+const flag_key__osm = "osm";
+
+export const flag_key_alias__x_osm = [flag_key__x_osm_view, flag_key__osm];
+export interface XOSMFlag {
+  flag:
+    | typeof flag_key__x_osm_view
+    | typeof flag_key__x_osm
+    | typeof flag_key__osm;
+  value: string | boolean;
+  raw?: string;
+}
diff --git a/packages/support-flags/--x-youtube-view/index.ts b/packages/support-flags/--x-youtube-view/index.ts
new file mode 100644
index 00000000..3ad83a44
--- /dev/null
+++ b/packages/support-flags/--x-youtube-view/index.ts
@@ -0,0 +1,19 @@
+// primary
+export const flag_key__x_youtube_view = "x-youtube-view";
+
+// alias
+const flag_key__x_youtube = "x-youtube";
+const flag_key__youtube = "youtube";
+
+export const flag_key_alias__x_youtube_view = [
+  flag_key__x_youtube_view,
+  flag_key__youtube,
+];
+export interface XYoutubeFlag {
+  flag:
+    | typeof flag_key__x_youtube_view
+    | typeof flag_key__x_youtube
+    | typeof flag_key__youtube;
+  value: string;
+  raw?: string;
+}
diff --git a/packages/support-flags/keys.ts b/packages/support-flags/keys.ts
index 6f633a1f..ddddf66c 100644
--- a/packages/support-flags/keys.ts
+++ b/packages/support-flags/keys.ts
@@ -12,6 +12,8 @@ import { flag_key_alias__as_span, flag_key__as_span } from "./--as-span";
 import { flag_key__as_button, flag_key_alias__as_button } from "./--as-button";
 import { flag_key__as_input, flag_key_alias_as_input } from "./--as-input";
 import { flag_key__as_slider, flag_key_alias__as_slider } from "./--as-slider";
+// prettier-ignore
+import { flag_key__as_progress, flag_key_alias__as_progress } from "./--as-progress";
 
 import { flag_key_alias__width, flag_key__width } from "./--width";
 import { flag_key_alias__min_width, flag_key__min_width } from "./--min-width";
@@ -28,6 +30,18 @@ import { flag_key_alias__fix_height, flag_key__fix_height } from "./--fix-height
 
 import { flag_key_alias__declare, flag_key__declare } from "./--declare";
 
+// prettier-ignore
+import { flag_key_alias__camera, flag_key__camera } from "./--camera-display";
+import { flag_key_alias__video, flag_key__video } from "./--video";
+import { flag_key_alias__webview, flag_key__webview } from "./--webview";
+// prettier-ignore
+import { flag_key_alias__x_figma_embed_view, flag_key__x_figma_embed_view } from "./--x-figma-embed-view";
+// prettier-ignore
+import { flag_key_alias__x_google_maps, flag_key__x_google_maps_view } from "./--x-google-maps-view";
+import { flag_key_alias__x_osm, flag_key__x_osm_view } from "./--x-osm-view";
+// prettier-ignore
+import { flag_key_alias__x_youtube_view, flag_key__x_youtube_view } from "./--x-youtube-view";
+
 //
 export {
   //
@@ -52,6 +66,8 @@ export { flag_key__as_input };
 
 export { flag_key__as_slider };
 
+export { flag_key__as_progress };
+
 export {
   flag_key__width,
   flag_key__min_width,
@@ -64,6 +80,16 @@ export { flag_key__fix_width, flag_key__fix_height };
 
 export { flag_key__declare };
 
+export {
+  flag_key__camera,
+  flag_key__video,
+  flag_key__webview,
+  flag_key__x_figma_embed_view,
+  flag_key__x_google_maps_view,
+  flag_key__x_osm_view,
+  flag_key__x_youtube_view,
+};
+
 export const alias = {
   autofocus: flag_key_alias__autofocus,
   as_h1: flag_key_alias__as_h1,
@@ -77,6 +103,7 @@ export const alias = {
   as_button: flag_key_alias__as_button,
   as_input: flag_key_alias_as_input,
   as_slider: flag_key_alias__as_slider,
+  as_progress: flag_key_alias__as_progress,
   width: flag_key_alias__width,
   min_width: flag_key_alias__min_width,
   max_width: flag_key_alias__max_width,
@@ -86,4 +113,11 @@ export const alias = {
   fix_width: flag_key_alias__fix_width,
   fix_height: flag_key_alias__fix_height,
   declare: flag_key_alias__declare,
+  camera: flag_key_alias__camera,
+  video: flag_key_alias__video,
+  webview: flag_key_alias__webview,
+  x_figma_embed_view: flag_key_alias__x_figma_embed_view,
+  x_google_maps_view: flag_key_alias__x_google_maps,
+  x_osm_view: flag_key_alias__x_osm,
+  x_youtube_view: flag_key_alias__x_youtube_view,
 };
diff --git a/packages/support-flags/parse.ts b/packages/support-flags/parse.ts
index 22b74fb7..365f63b0 100644
--- a/packages/support-flags/parse.ts
+++ b/packages/support-flags/parse.ts
@@ -11,16 +11,24 @@ import { flag_key__as_wrap } from "./--as-wrap";
 import { flag_key__module } from "./--module";
 import type {
   HeadingFlag,
-  TextElementPreferenceFlag,
   AsParagraphFlag,
   AsTextSpanFlag,
   AsButtonFlag,
   AsInputFlag,
+  AsProgressFlag,
   SimpleBooleanValueFlag,
   FixWHFlag,
   DeclareSpecificationFlag,
   WHDeclarationFlag,
   AsSliderFlag,
+  CameraDisplayFlag,
+  VideoFlag,
+  WebViewFlag,
+  XFigmaEmbedFlag,
+  XGoogleMapsFlag,
+  XOSMFlag,
+  XYoutubeFlag,
+  Flag,
 } from "./types";
 
 export type FlagsParseResult = Results & {
@@ -31,9 +39,17 @@ export type FlagsParseResult = Results & {
     contains_button_flag: boolean;
     contains_input_flag: boolean;
     contains_slider_flag: boolean;
+    contains_progress_flag: boolean;
     contains_wh_declaration_flag: boolean;
     contains_fix_wh_flag: boolean;
     contains_declare_flag: boolean;
+    contains_camera_flag: boolean;
+    contains_video_flag: boolean;
+    contains_webview_flag: boolean;
+    contains_x_figma_embed_view_flag: boolean;
+    contains_x_google_maps_view_flag: boolean;
+    contains_x_osm_view_flag: boolean;
+    contains_x_youtube_view_flag: boolean;
     // ...
     [key: string]: boolean;
   };
@@ -70,6 +86,9 @@ export function parse(name: string): FlagsParseResult {
       // slider
       __slider_alias_pref,
 
+      // progress
+      __progress_alias_pref,
+
       //#region
       __width_alias_pref,
       __max_width_alias_pref,
@@ -88,6 +107,16 @@ export function parse(name: string): FlagsParseResult {
       __declare_alias_pref,
       //#endregion
 
+      // #region
+      __camera_alias_pref,
+      __video_alias_pref,
+      __webview_alias_pref,
+      __x_figma_embed_view_alias_pref,
+      __x_google_maps_view_alias_pref,
+      __x_osm_view_alias_pref,
+      __x_youtube_view_alias_pref,
+      // #endregion
+
       {
         name: flag_key__module,
         type: "bool", // TODO: support string also.
@@ -120,6 +149,11 @@ export function parse(name: string): FlagsParseResult {
       keys.alias.as_slider
     );
 
+    const as_progress_flag = handle_single_boolean_flag_alias<AsProgressFlag>(
+      _raw_parsed,
+      keys.alias.as_progress
+    );
+
     const wh_declaration_flag =
       transform_wh_declaration_alias_from_raw(_raw_parsed);
     const fix_wh_flag = handle_single_boolean_flag_alias<FixWHFlag>(
@@ -133,6 +167,44 @@ export function parse(name: string): FlagsParseResult {
         keys.alias.declare
       );
 
+    const camera_flag = handle_single_boolean_flag_alias<CameraDisplayFlag>(
+      _raw_parsed,
+      keys.alias.camera
+    );
+
+    const video_flag = handle_single_typed_value_flag_alias<VideoFlag>(
+      _raw_parsed,
+      keys.alias.video
+    );
+
+    const webview_flag = handle_single_typed_value_flag_alias<WebViewFlag>(
+      _raw_parsed,
+      keys.alias.webview
+    );
+
+    const x_figma_embed_view_flag =
+      handle_single_typed_value_flag_alias<XFigmaEmbedFlag>(
+        _raw_parsed,
+        keys.alias.x_figma_embed_view
+      );
+
+    const x_google_maps_view_flag =
+      handle_single_typed_value_flag_alias<XGoogleMapsFlag>(
+        _raw_parsed,
+        keys.alias.x_google_maps_view
+      );
+
+    const x_osm_view_flag = handle_single_typed_value_flag_alias<XOSMFlag>(
+      _raw_parsed,
+      keys.alias.x_osm_view
+    );
+
+    const x_youtube_view_flag =
+      handle_single_typed_value_flag_alias<XYoutubeFlag>(
+        _raw_parsed,
+        keys.alias.x_youtube_view
+      );
+
     return {
       ..._raw_parsed,
       ...as_heading_flag,
@@ -140,9 +212,18 @@ export function parse(name: string): FlagsParseResult {
       ...(as_span_flag ?? {}),
       ...(as_button_flag ?? {}),
       ...(as_input_flag ?? {}),
+      ...(as_progress_flag ?? {}),
       ...(wh_declaration_flag ?? {}),
       ...(fix_wh_flag ?? {}),
       ...(declare_flag ?? {}),
+      ...(camera_flag ?? {}),
+      ...(video_flag ?? {}),
+      ...(webview_flag ?? {}),
+      ...(x_figma_embed_view_flag ?? {}),
+      ...(x_google_maps_view_flag ?? {}),
+      ...(x_osm_view_flag ?? {}),
+      ...(x_youtube_view_flag ?? {}),
+
       __meta: {
         contains_heading_flag: notempty(as_heading_flag),
         contains_paragraph_flag: notempty(as_paragraph_flag),
@@ -150,9 +231,17 @@ export function parse(name: string): FlagsParseResult {
         contains_button_flag: notempty(as_button_flag),
         contains_input_flag: notempty(as_input_flag),
         contains_slider_flag: notempty(as_slider_flag),
+        contains_progress_flag: notempty(as_progress_flag),
         contains_wh_declaration_flag: notempty(as_span_flag),
         contains_fix_wh_flag: notempty(fix_wh_flag),
         contains_declare_flag: notempty(declare_flag),
+        contains_camera_flag: notempty(camera_flag),
+        contains_video_flag: notempty(video_flag),
+        contains_webview_flag: notempty(webview_flag),
+        contains_x_figma_embed_view_flag: notempty(x_figma_embed_view_flag),
+        contains_x_google_maps_view_flag: notempty(x_google_maps_view_flag),
+        contains_x_osm_view_flag: notempty(x_osm_view_flag),
+        contains_x_youtube_view_flag: notempty(x_youtube_view_flag),
       },
     };
   } catch (_) {
@@ -164,25 +253,30 @@ export function parse(name: string): FlagsParseResult {
 
 const notempty = (obj) => Object.keys(obj ?? {}).length > 0;
 
-const _simple_boolean_value_flag_prefernce_mapper = (
-  k: string | Array<string>
-): Option =>
-  Array.isArray(k)
+const _simple_typed_value_flag_preference_mapper = (
+  k: string | Array<string>,
+  type: Option["type"]
+): Option => {
+  return Array.isArray(k)
     ? {
         names: k,
-        type: "bool",
+        type: type,
       }
     : {
         name: k,
-        type: "bool",
+        type: type,
       };
+};
+const _simple_boolean_value_flag_prefernce_mapper = (
+  k: string | Array<string>
+): Option => _simple_typed_value_flag_preference_mapper(k, "bool");
 
-function handle_single_boolean_flag_alias<T extends SimpleBooleanValueFlag>(
-  raw: { [key: string]: boolean },
-  alias: string[]
-) {
+function handle_single_typed_value_flag_alias<
+  T extends Flag,
+  V extends Flag["value"] = T["value"]
+>(raw: { [key: string]: V }, alias: string[]) {
   // e.g. `[ { h1: true } ]`
-  const mapped: { key: string; value: boolean }[] = alias.map((_) => ({
+  const mapped: { key: string; value: V }[] = alias.map((_) => ({
     key: _,
     value: raw[_],
   }));
@@ -201,6 +295,13 @@ function handle_single_boolean_flag_alias<T extends SimpleBooleanValueFlag>(
   if (Object.keys(converted).length > 0) return converted;
 }
 
+function handle_single_boolean_flag_alias<T extends SimpleBooleanValueFlag>(
+  raw: { [key: string]: boolean },
+  alias: string[]
+) {
+  return handle_single_typed_value_flag_alias<T>(raw, alias);
+}
+
 function transform_heading_alias_from_raw(raw: { [key: string]: boolean }): {
   [key: string]: HeadingFlag;
 } {
@@ -289,6 +390,10 @@ const __slider_alias_pref = _simple_boolean_value_flag_prefernce_mapper(
   keys.alias.as_slider
 );
 
+const __progress_alias_pref = _simple_boolean_value_flag_prefernce_mapper(
+  keys.alias.as_progress
+);
+
 // -----------------------------------------------------------------------------
 // -----------------------------------------------------------------------------
 // -----------------------------------------------------------------------------
@@ -373,3 +478,43 @@ const __fix_height_alias_pref = _simple_boolean_value_flag_prefernce_mapper(
 const __declare_alias_pref = _simple_boolean_value_flag_prefernce_mapper(
   keys.alias.declare
 );
+
+// -----------------------------------------------------------------------------
+// -----------------------------------------------------------------------------
+// -----------------------------------------------------------------------------
+
+const __camera_alias_pref = _simple_boolean_value_flag_prefernce_mapper(
+  keys.alias.camera
+);
+
+const __video_alias_pref = _simple_typed_value_flag_preference_mapper(
+  keys.alias.video,
+  "string"
+);
+
+const __webview_alias_pref = _simple_typed_value_flag_preference_mapper(
+  keys.alias.webview,
+  "string"
+);
+
+const __x_figma_embed_view_alias_pref =
+  _simple_typed_value_flag_preference_mapper(
+    keys.alias.x_figma_embed_view,
+    "string"
+  );
+
+const __x_osm_view_alias_pref = _simple_typed_value_flag_preference_mapper(
+  keys.alias.x_osm_view,
+  "string"
+);
+
+const __x_google_maps_view_alias_pref =
+  _simple_typed_value_flag_preference_mapper(
+    keys.alias.x_google_maps_view,
+    "string"
+  );
+
+const __x_youtube_view_alias_pref = _simple_typed_value_flag_preference_mapper(
+  keys.alias.x_youtube_view,
+  "string"
+);
diff --git a/packages/support-flags/types.ts b/packages/support-flags/types.ts
index fde66877..c5488427 100644
--- a/packages/support-flags/types.ts
+++ b/packages/support-flags/types.ts
@@ -9,8 +9,11 @@ import type { AsHeading6Flag } from "./--as-h6";
 import type { AsButtonFlag } from "./--as-button";
 import type { AsInputFlag } from "./--as-input";
 import type { AsSliderFlag } from "./--as-slider";
+import type { AsProgressFlag } from "./--as-progress";
 import type { AsParagraphFlag } from "./--as-p";
 import type { AsTextSpanFlag } from "./--as-span";
+import type { QFlag } from "./--q";
+import type { LatLngFlag } from "./--latlng";
 import type { WidthFlag } from "./--width";
 import type { MinWidthFlag } from "./--min-width";
 import type { MaxWidthFlag } from "./--max-width";
@@ -20,17 +23,33 @@ import type { MaxHeightFlag } from "./--max-height";
 import type { FixWidthFlag } from "./--fix-width";
 import type { FixHeightFlag } from "./--fix-height";
 import type { DeclareSpecificationFlag } from "./--declare";
+import type { CameraDisplayFlag } from "./--camera-display";
+import type { VideoFlag } from "./--video";
+import type { WebViewFlag } from "./--webview";
+import type { XFigmaEmbedFlag } from "./--x-figma-embed-view";
+import type { XGoogleMapsFlag } from "./--x-google-maps-view";
+import type { XOSMFlag } from "./--x-osm-view";
+import type { XYoutubeFlag } from "./--x-youtube-view";
 
 export type Flag =
+  | SimpleValueFalg
   | AutofocusFlag
   | ArtworkFlag
   | TextElementPreferenceFlag
   | WHDeclarationFlag
   | FixWHFlag
+  | ValueFeedFlag
   | DeclareSpecificationFlag
+  | ExtendedComponentCastingFlag
   | ComponentCastingFlag;
 
-export interface SimpleBooleanValueFlag {
+export interface SimpleValueFalg<T = any> {
+  flag: string;
+  value: boolean;
+  _raw?: string;
+}
+
+export interface SimpleBooleanValueFlag extends SimpleValueFalg<boolean> {
   flag: string;
   value: boolean;
   _raw?: string;
@@ -79,10 +98,25 @@ export type HeadingFlag =
   | AsHeading5Flag
   | AsHeading6Flag;
 
+export type ValueFeedFlag = QFlag | LatLngFlag;
+
 /**
  * Type alias for a flag taht can be used to specify the element casting
  */
-export type ComponentCastingFlag = AsButtonFlag | AsInputFlag | AsSliderFlag;
+export type ComponentCastingFlag =
+  | AsButtonFlag
+  | AsInputFlag
+  | AsSliderFlag
+  | AsProgressFlag;
+
+export type ExtendedComponentCastingFlag =
+  | CameraDisplayFlag
+  | VideoFlag
+  | WebViewFlag
+  | XFigmaEmbedFlag
+  | XGoogleMapsFlag
+  | XOSMFlag
+  | XYoutubeFlag;
 
 // ---------------------------------------------------------------------------
 // ---------------------------------------------------------------------------
@@ -118,6 +152,7 @@ export type { AsTextSpanFlag };
 export type { AsButtonFlag };
 export type { AsInputFlag };
 export type { AsSliderFlag };
+export type { AsProgressFlag };
 
 // ---------------------------------------------------------------------------
 // ---------------------------------------------------------------------------
@@ -130,3 +165,21 @@ export type { FixWidthFlag, FixHeightFlag };
 // ---------------------------------------------------------------------------
 
 export type { DeclareSpecificationFlag };
+
+// ---------------------------------------------------------------------------
+// ---------------------------------------------------------------------------
+
+export type {
+  CameraDisplayFlag,
+  VideoFlag,
+  WebViewFlag,
+  XFigmaEmbedFlag,
+  XGoogleMapsFlag,
+  XOSMFlag,
+  XYoutubeFlag,
+};
+
+// ---------------------------------------------------------------------------
+// ---------------------------------------------------------------------------
+
+export type { QFlag, LatLngFlag };