@flamingo-stack/openframe-frontend-core 0.0.662 → 0.0.663-2275.7014.1

package/src/components/icons/elestio-logo.tsx

@@ -4,7 +4,10 @@ import React from 'react';
  * Official Elestio logo with unique IDs to prevent gradient/clip-path collisions
  * when the same SVG is rendered multiple times on the page.
  */
-/** @deprecated Use icons from icons-v2-generated instead. */
+/**
+ * @deprecated Use icons from icons-v2-generated instead. This component is retained
+ * only for existing usages; do not add new usages or new icons to this deprecated set.
+ */
 export const ElestioLogo = ({ className, ...props }: { className?: string } & React.SVGProps<SVGSVGElement>) => {
   // Generate unique ID suffix to avoid ID collisions between instances
   const uniqueId = React.useId();

package/src/components/icons/empty-vendor-icon.tsx

@@ -1,9 +1,15 @@
+import { useId } from 'react';
+
 interface EmptyVendorIconProps {
   className?: string;
 }
 
 /** @deprecated Use icons from icons-v2-generated instead. */
 export function EmptyVendorIcon({ className }: EmptyVendorIconProps) {
+  const uniqueId = useId();
+  const patternId = `pattern0_1643_33816_${uniqueId}`;
+  const imageId = `image0_1643_33816_${uniqueId}`;
+
   return (
     <svg
       width="24"
@@ -16,14 +22,14 @@ export function EmptyVendorIcon({ className }: EmptyVendorIconProps) {
     >
       <path
         d="M0 4C0 1.79086 1.79086 0 4 0H20C22.2091 0 24 1.79086 24 4V20C24 22.2091 22.2091 24 20 24H4C1.79086 24 0 22.2091 0 20V4Z"
-        fill="url(#pattern0_1643_33816)"
+        fill={`url(#${patternId})`}
       />
       <defs>
-        <pattern id="pattern0_1643_33816" patternContentUnits="objectBoundingBox" width="1" height="1">
-          <use xlinkHref="#image0_1643_33816" transform="scale(0.0104167)" />
+        <pattern id={patternId} patternContentUnits="objectBoundingBox" width="1" height="1">
+          <use xlinkHref={`#${imageId}`} transform="scale(0.0104167)" />
         </pattern>
         <image
-          id="image0_1643_33816"
+          id={imageId}
           width="96"
           height="96"
           preserveAspectRatio="none"

package/src/stories/ScriptArguments.stories.tsx

@@ -208,7 +208,7 @@ export const Interactive: Story = {
     return (
       <div className="flex flex-col gap-4">
         <ScriptArguments arguments={args} onArgumentsChange={setArgs} titleLabel="Script Arguments" />
-        <div className="rounded-[6px] border border-[#3a3a3a] bg-[#1a1a1a] p-4">
+        <div className="rounded-[6px] border border-ods-border bg-ods-card p-4">
           <p className="mb-2 text-sm text-ods-text-secondary">Current State:</p>
           <pre className="overflow-auto text-xs text-ods-text-primary">{JSON.stringify(args, null, 2)}</pre>
         </div>

package/src/utils/format-duration.ts

@@ -0,0 +1,5 @@
+export function formatDuration(ms: number) {
+  const minutes = Math.floor(ms / 60000);
+  const seconds = Math.floor((ms % 60000) / 1000);
+  return `${minutes}:${String(seconds).padStart(2, '0')}`;
+}