Merged with main

daggerheart.mjs

@@ -216,46 +216,27 @@ Hooks.on('chatMessage', (_, message) => {
                       })
                     : game.i18n.localize('DAGGERHEART.General.Duality');
 
-                const hopeAndFearRoll = `1${rollCommand.hope ?? 'd12'}+1${rollCommand.fear ?? 'd12'}`;
+                const config = {
-                const advantageRoll = `${advantageState === true ? '+d6' : advantageState === false ? '-d6' : ''}`;
-                const attributeRoll = `${trait?.value ? `${trait.value > 0 ? `+${trait.value}` : `${trait.value}`}` : ''}`;
-                const roll = await Roll.create(`${hopeAndFearRoll}${advantageRoll}${attributeRoll}`).evaluate();
-
-                setDiceSoNiceForDualityRoll(roll, advantageState);
-
-                resolve({
-                    roll,
-                    trait: trait
-                        ? {
-                              value: trait.value,
-                              label: `${game.i18n.localize(abilities[traitValue].label)} ${trait.value >= 0 ? `+` : ``}${trait.value}`
-                          }
-                        : undefined,
-                    title
-                });
-            }).then(async ({ roll, trait, title }) => {
-                const cls = getDocumentClass('ChatMessage');
-                const systemData = new DHDualityRoll({
                     title: title,
-                    origin: target?.id,
+                    roll: {
-                    roll: roll,
+                        trait: traitValue
-                    modifiers: trait ? [trait] : [],
+                    },
-                    hope: { dice: rollCommand.hope ?? 'd12', value: roll.dice[0].total },
+                    data: {
-                    fear: { dice: rollCommand.fear ?? 'd12', value: roll.dice[1].total },
+                        traits: {
-                    advantage: advantageState !== null ? { dice: 'd6', value: roll.dice[2].total } : undefined,
+                            [traitValue]: trait
-                    advantageState
+                        }
-                });
+                    },
-
+                    source: target,
-                const msgData = {
+                    hasSave: false,
-                    type: 'dualityRoll',
+                    dialog: { configure: false },
-                    sound: CONFIG.sounds.dice,
+                    evaluate: true,
-                    system: systemData,
+                    advantage: rollCommand.advantage == true,
-                    user: game.user.id,
+                    disadvantage: rollCommand.disadvantage == true
-                    content: 'systems/daggerheart/templates/chat/duality-roll.hbs',
-                    rolls: [roll]
                 };
 
-                cls.create(msgData);
+                await CONFIG.Dice.daggerheart['DualityRoll'].build(config);
+
+                resolve();
             });
         }
 

lang/en.json

@@ -1316,7 +1316,8 @@
                     }
                 },
                 "Experiences": "Experiences",
-                "Level": "Level"
+                "Level": "Level",
+                "noPartner": "No Partner selected"
             },
             "Adversary": {
                 "FIELDS": {

module/applications/_module.mjs

@@ -1,6 +1,6 @@
 export { default as DhCharacterSheet } from './sheets/actors/character.mjs';
 export { default as DhpAdversarySheet } from './sheets/actors/adversary.mjs';
-export { default as DhCompanionSheet } from './sheets/companion.mjs';
+export { default as DhCompanionSheet } from './sheets/actors/companion.mjs';
 export { default as DhpClassSheet } from './sheets/items/class.mjs';
 export { default as DhpSubclass } from './sheets/items/subclass.mjs';
 export { default as DhpFeatureSheet } from './sheets/items/feature.mjs';
@@ -19,3 +19,4 @@ export { default as DhBeastform } from './sheets/items/beastform.mjs';
 export { default as DhTooltipManager } from './tooltipManager.mjs';
 
 export * as api from './sheets/api/_modules.mjs';
+export * as ux from './ux/_module.mjs';

module/applications/chatMessage.mjs

@@ -1,6 +1,10 @@
 export default class DhpChatMessage extends foundry.documents.ChatMessage {
     async renderHTML() {
-        if(this.system.messageTemplate) this.content = await foundry.applications.handlebars.renderTemplate(this.system.messageTemplate, this.system);
+        if (this.system.messageTemplate)
+            this.content = await foundry.applications.handlebars.renderTemplate(
+                this.system.messageTemplate,
+                this.system
+            );
 
         /* We can change to fully implementing the renderHTML function if needed, instead of augmenting it. */
         const html = await super.renderHTML();
@@ -14,7 +18,7 @@ export default class DhpChatMessage extends foundry.documents.ChatMessage {
                     break;
                 case -1:
                     html.classList.add('fear');
-                    break;         
+                    break;
                 default:
                     html.classList.add('critical');
                     break;

module/applications/roll.mjs

@@ -1,6 +1,7 @@
 import DHDamageRoll from '../data/chat-message/damageRoll.mjs';
 import D20RollDialog from '../dialogs/d20RollDialog.mjs';
 import DamageDialog from '../dialogs/damageDialog.mjs';
+import { setDiceSoNiceForDualityRoll } from '../helpers/utils.mjs';
 
 /*
     - Damage & other resources roll
@@ -96,7 +97,8 @@ export class DHRoll extends Roll {
     }
 
     static applyKeybindings(config) {
-        config.dialog.configure ??= !(config.event.shiftKey || config.event.altKey || config.event.ctrlKey);
+        if (config.event)
+            config.dialog.configure ??= !(config.event.shiftKey || config.event.altKey || config.event.ctrlKey);
     }
 
     formatModifier(modifier) {
@@ -176,18 +178,27 @@ export class D20Roll extends DHRoll {
     }
 
     static applyKeybindings(config) {
-        const keys = {
+        let keys = {
-            normal: config.event.shiftKey || config.event.altKey || config.event.ctrlKey,
+            normal: true,
-            advantage: config.event.altKey,
+            advantage: false,
-            disadvantage: config.event.ctrlKey
+            disadvantage: false
         };
 
+        if (config.event) {
+            keys = {
+                normal: config.event.shiftKey || config.event.altKey || config.event.ctrlKey,
+                advantage: config.event.altKey,
+                disadvantage: config.event.ctrlKey
+            };
+        }
+
         // Should the roll configuration dialog be displayed?
         config.dialog.configure ??= !Object.values(keys).some(k => k);
 
         // Determine advantage mode
-        const advantage = config.roll.advantage === this.ADV_MODE.ADVANTAGE || keys.advantage;
+        const advantage = config.roll.advantage === this.ADV_MODE.ADVANTAGE || keys.advantage || config.advantage;
-        const disadvantage = config.roll.advantage === this.ADV_MODE.DISADVANTAGE || keys.disadvantage;
+        const disadvantage =
+            config.roll.advantage === this.ADV_MODE.DISADVANTAGE || keys.disadvantage || config.disadvantage;
         if (advantage && !disadvantage) config.roll.advantage = this.ADV_MODE.ADVANTAGE;
         else if (!advantage && disadvantage) config.roll.advantage = this.ADV_MODE.DISADVANTAGE;
         else config.roll.advantage = this.ADV_MODE.NORMAL;
@@ -254,6 +265,18 @@ export class D20Roll extends DHRoll {
         });
     }
 
+    static async buildEvaluate(roll, config = {}, message = {}) {
+        if (config.evaluate !== false) await roll.evaluate();
+        const advantageState =
+            config.roll.advantage == this.ADV_MODE.ADVANTAGE
+                ? true
+                : config.roll.advantage == this.ADV_MODE.DISADVANTAGE
+                  ? false
+                  : null;
+        setDiceSoNiceForDualityRoll(roll, advantageState);
+        this.postEvaluate(roll, config);
+    }
+
     static postEvaluate(roll, config = {}) {
         super.postEvaluate(roll, config);
         if (config.targets?.length) {

module/applications/sheets/actors/character.mjs

@@ -6,6 +6,7 @@ import DaggerheartSheet from '.././daggerheart-sheet.mjs';
 import { abilities } from '../../../config/actorConfig.mjs';
 import DhCharacterlevelUp from '../../levelup/characterLevelup.mjs';
 import DhCharacterCreation from '../../characterCreation.mjs';
+import FilterMenu from '../../ux/filter-menu.mjs';
 
 const { ActorSheetV2 } = foundry.applications.sheets;
 const { TextEditor } = foundry.applications.ux;
@@ -215,6 +216,7 @@ export default class CharacterSheet extends DaggerheartSheet(ActorSheetV2) {
         await super._onFirstRender(context, options);
 
         this._createContextMenues();
+        this._createFilterMenus();
     }
 
     /** @inheritDoc */
@@ -369,7 +371,7 @@ export default class CharacterSheet extends DaggerheartSheet(ActorSheetV2) {
     }
 
     /* -------------------------------------------- */
-    /*  Search Filter                               */
+    /*  Filter Tracking                             */
     /* -------------------------------------------- */
 
     /**
@@ -379,12 +381,33 @@ export default class CharacterSheet extends DaggerheartSheet(ActorSheetV2) {
     #search = {};
 
     /**
-     * Track which item IDs are currently displayed due to a search filter.
+     * The currently active search filter.
-     * @type {{ inventory: Set<string>, loadout: Set<string> }}
+     * @type {FilterMenu}
+     */
+    #menu = {};
+
+    /**
+     * Tracks which item IDs are currently displayed, organized by filter type and section.
+     * @type {{
+     *   inventory: {
+     *     search: Set<string>,
+     *     menu: Set<string>
+     *   },
+     *   loadout: {
+     *     search: Set<string>,
+     *     menu: Set<string>
+     *   },
+     * }}
      */
     #filteredItems = {
-        inventory: new Set(),
+        inventory: {
-        loadout: new Set()
+            search: new Set(),
+            menu: new Set()
+        },
+        loadout: {
+            search: new Set(),
+            menu: new Set()
+        }
     };
 
     /**
@@ -432,15 +455,14 @@ export default class CharacterSheet extends DaggerheartSheet(ActorSheetV2) {
      * @protected
      */
     _onSearchFilterInventory(event, query, rgx, html) {
-        this.#filteredItems.inventory.clear();
+        this.#filteredItems.inventory.search.clear();
 
-        for (const ul of html.querySelectorAll('.items-list')) {
+        for (const li of html.querySelectorAll('.inventory-item')) {
-            for (const li of ul.querySelectorAll('.inventory-item')) {
+            const item = this.document.items.get(li.dataset.itemId);
-                const item = this.document.items.get(li.dataset.itemId);
+            const matchesSearch = !query || foundry.applications.ux.SearchFilter.testQuery(rgx, item.name);
-                const match = !query || foundry.applications.ux.SearchFilter.testQuery(rgx, item.name);
+            if (matchesSearch) this.#filteredItems.inventory.search.add(item.id);
-                if (match) this.#filteredItems.inventory.add(item.id);
+            const { menu } = this.#filteredItems.inventory;
-                li.hidden = !match;
+            li.hidden = !(menu.has(item.id) && matchesSearch);
-            }
         }
     }
 
@@ -453,15 +475,14 @@ export default class CharacterSheet extends DaggerheartSheet(ActorSheetV2) {
      * @protected
      */
     _onSearchFilterCard(event, query, rgx, html) {
-        this.#filteredItems.loadout.clear();
+        this.#filteredItems.loadout.search.clear();
 
-        const elements = html.querySelectorAll('.items-list .inventory-item, .card-list .card-item');
+        for (const li of html.querySelectorAll('.items-list .inventory-item, .card-list .card-item')) {
-
-        for (const li of elements) {
             const item = this.document.items.get(li.dataset.itemId);
-            const match = !query || foundry.applications.ux.SearchFilter.testQuery(rgx, item.name);
+            const matchesSearch = !query || foundry.applications.ux.SearchFilter.testQuery(rgx, item.name);
-            if (match) this.#filteredItems.loadout.add(item.id);
+            if (matchesSearch) this.#filteredItems.loadout.search.add(item.id);
-            li.hidden = !match;
+            const { menu } = this.#filteredItems.loadout;
+            li.hidden = !(menu.has(item.id) && matchesSearch);
         }
     }
 
@@ -477,6 +498,102 @@ export default class CharacterSheet extends DaggerheartSheet(ActorSheetV2) {
         this.document.diceRoll(config);
     }
 
+    /* -------------------------------------------- */
+    /*  Filter Menus                                */
+    /* -------------------------------------------- */
+
+    _createFilterMenus() {
+        //Menus could be a application option if needed
+        const menus = [
+            {
+                key: 'inventory',
+                container: '[data-application-part="inventory"]',
+                content: '.items-section',
+                callback: this._onMenuFilterInventory.bind(this),
+                target: '.filter-button',
+                filters: FilterMenu.invetoryFilters
+            },
+            {
+                key: 'loadout',
+                container: '[data-application-part="loadout"]',
+                content: '.items-section',
+                callback: this._onMenuFilterLoadout.bind(this),
+                target: '.filter-button',
+                filters: FilterMenu.cardsFilters
+            }
+        ];
+
+        menus.forEach(m => {
+            const container = this.element.querySelector(m.container);
+            this.#menu[m.key] = new FilterMenu(container, m.target, m.filters, m.callback, {
+                contentSelector: m.content
+            });
+        });
+    }
+
+    /**
+     * Callback when filters change
+     * @param {PointerEvent} event
+     * @param {HTMLElement} html
+     * @param {import('../ux/filter-menu.mjs').FilterItem[]} filters
+     */
+    _onMenuFilterInventory(event, html, filters) {
+        this.#filteredItems.inventory.menu.clear();
+
+        for (const li of html.querySelectorAll('.inventory-item')) {
+            const item = this.document.items.get(li.dataset.itemId);
+
+            const matchesMenu =
+                filters.length === 0 || filters.some(f => foundry.applications.ux.SearchFilter.evaluateFilter(item, f));
+            if (matchesMenu) this.#filteredItems.inventory.menu.add(item.id);
+
+            const { search } = this.#filteredItems.inventory;
+            li.hidden = !(search.has(item.id) && matchesMenu);
+        }
+    }
+
+    /**
+     * Callback when filters change
+     * @param {PointerEvent} event
+     * @param {HTMLElement} html
+     * @param {import('../ux/filter-menu.mjs').FilterItem[]} filters
+     */
+    _onMenuFilterLoadout(event, html, filters) {
+        this.#filteredItems.loadout.menu.clear();
+
+        for (const li of html.querySelectorAll('.items-list .inventory-item, .card-list .card-item')) {
+            const item = this.document.items.get(li.dataset.itemId);
+
+            const matchesMenu =
+                filters.length === 0 || filters.some(f => foundry.applications.ux.SearchFilter.evaluateFilter(item, f));
+            if (matchesMenu) this.#filteredItems.loadout.menu.add(item.id);
+
+            const { search } = this.#filteredItems.loadout;
+            li.hidden = !(search.has(item.id) && matchesMenu);
+        }
+    }
+    /* -------------------------------------------- */
+
+    async mapFeatureType(data, configType) {
+        return await Promise.all(
+            data.map(async x => {
+                const abilities = x.system.abilities
+                    ? await Promise.all(x.system.abilities.map(async x => await fromUuid(x.uuid)))
+                    : [];
+
+                return {
+                    ...x,
+                    uuid: x.uuid,
+                    system: {
+                        ...x.system,
+                        abilities: abilities,
+                        type: game.i18n.localize(configType[x.system.type ?? x.type].label)
+                    }
+                };
+            })
+        );
+    }
+
     static async toggleMarks(_, button) {
         const markValue = Number.parseInt(button.dataset.value);
         const newValue = this.document.system.armor.system.marks.value >= markValue ? markValue - 1 : markValue;

module/applications/sheets/actors/companion.mjs

@@ -0,0 +1,108 @@
+import DaggerheartSheet from '../daggerheart-sheet.mjs';
+import DHCompanionSettings from '../applications/companion-settings.mjs';
+
+const { ActorSheetV2 } = foundry.applications.sheets;
+export default class DhCompanionSheet extends DaggerheartSheet(ActorSheetV2) {
+    static DEFAULT_OPTIONS = {
+        tag: 'form',
+        classes: ['daggerheart', 'sheet', 'actor', 'dh-style', 'companion'],
+        position: { width: 300 },
+        actions: {
+            viewActor: this.viewActor,
+            openSettings: this.openSettings,
+            useItem: this.useItem,
+            toChat: this.toChat
+        },
+        form: {
+            handler: this.updateForm,
+            submitOnChange: true,
+            closeOnSubmit: false
+        }
+    };
+
+    static PARTS = {
+        header: { template: 'systems/daggerheart/templates/sheets/actors/companion/header.hbs' },
+        details: { template: 'systems/daggerheart/templates/sheets/actors/companion/details.hbs' },
+        effects: { template: 'systems/daggerheart/templates/sheets/actors/companion/effects.hbs' }
+    };
+
+    static TABS = {
+        details: {
+            active: true,
+            cssClass: '',
+            group: 'primary',
+            id: 'details',
+            icon: null,
+            label: 'DAGGERHEART.General.tabs.details'
+        },
+        effects: {
+            active: false,
+            cssClass: '',
+            group: 'primary',
+            id: 'effects',
+            icon: null,
+            label: 'DAGGERHEART.Sheets.PC.Tabs.effects'
+        }
+    };
+
+    async _prepareContext(_options) {
+        const context = await super._prepareContext(_options);
+        context.document = this.document;
+        context.tabs = super._getTabs(this.constructor.TABS);
+
+        return context;
+    }
+
+    static async updateForm(event, _, formData) {
+        await this.document.update(formData.object);
+        this.render();
+    }
+
+    static async viewActor(_, button) {
+        const target = button.closest('[data-item-uuid]');
+        const actor = await foundry.utils.fromUuid(target.dataset.itemUuid);
+        if (!actor) return;
+
+        actor.sheet.render(true);
+    }
+
+    getAction(element) {
+        const itemId = (element.target ?? element).closest('[data-item-id]').dataset.itemId,
+            item = this.document.system.actions.find(x => x.id === itemId);
+        return item;
+    }
+
+    static async useItem(event) {
+        const action = this.getAction(event) ?? this.actor.system.attack;
+        action.use(event);
+    }
+
+    static async toChat(event, button) {
+        if (button?.dataset?.type === 'experience') {
+            const experience = this.document.system.experiences[button.dataset.uuid];
+            const cls = getDocumentClass('ChatMessage');
+            const systemData = {
+                name: game.i18n.localize('DAGGERHEART.General.Experience.Single'),
+                description: `${experience.name} ${experience.total < 0 ? experience.total : `+${experience.total}`}`
+            };
+            const msg = new cls({
+                type: 'abilityUse',
+                user: game.user.id,
+                system: systemData,
+                content: await foundry.applications.handlebars.renderTemplate(
+                    'systems/daggerheart/templates/chat/ability-use.hbs',
+                    systemData
+                )
+            });
+
+            cls.create(msg.toObject());
+        } else {
+            const item = this.getAction(event) ?? this.document.system.attack;
+            item.toChat(this.document.id);
+        }
+    }
+
+    static async openSettings() {
+        await new DHCompanionSettings(this.document).render(true);
+    }
+}

module/applications/sheets/applications/companion-settings.mjs

@@ -0,0 +1,160 @@
+import { GMUpdateEvent, socketEvent } from '../../../helpers/socket.mjs';
+import DhCompanionlevelUp from '../../levelup/companionLevelup.mjs';
+
+const { HandlebarsApplicationMixin, ApplicationV2 } = foundry.applications.api;
+
+export default class DHCompanionSettings extends HandlebarsApplicationMixin(ApplicationV2) {
+    constructor(actor) {
+        super({});
+
+        this.actor = actor;
+    }
+
+    get title() {
+        return `${game.i18n.localize('DAGGERHEART.Sheets.TABS.settings')}`;
+    }
+
+    static DEFAULT_OPTIONS = {
+        tag: 'form',
+        classes: ['daggerheart', 'dh-style', 'dialog', 'companion-settings'],
+        window: {
+            icon: 'fa-solid fa-wrench',
+            resizable: false
+        },
+        position: { width: 455, height: 'auto' },
+        actions: {
+            levelUp: this.levelUp
+        },
+        form: {
+            handler: this.updateForm,
+            submitOnChange: true,
+            closeOnSubmit: false
+        }
+    };
+
+    static PARTS = {
+        header: {
+            id: 'header',
+            template: 'systems/daggerheart/templates/sheets/applications/companion-settings/header.hbs'
+        },
+        tabs: { template: 'systems/daggerheart/templates/sheets/global/tabs/tab-navigation.hbs' },
+        details: {
+            id: 'details',
+            template: 'systems/daggerheart/templates/sheets/applications/companion-settings/details.hbs'
+        },
+        experiences: {
+            id: 'experiences',
+            template: 'systems/daggerheart/templates/sheets/applications/companion-settings/experiences.hbs'
+        },
+        attack: {
+            id: 'attack',
+            template: 'systems/daggerheart/templates/sheets/applications/companion-settings/attack.hbs'
+        }
+    };
+
+    static TABS = {
+        details: {
+            active: true,
+            cssClass: '',
+            group: 'primary',
+            id: 'details',
+            icon: null,
+            label: 'DAGGERHEART.General.tabs.details'
+        },
+        experiences: {
+            active: false,
+            cssClass: '',
+            group: 'primary',
+            id: 'experiences',
+            icon: null,
+            label: 'DAGGERHEART.General.tabs.experiences'
+        },
+        attack: {
+            active: false,
+            cssClass: '',
+            group: 'primary',
+            id: 'attack',
+            icon: null,
+            label: 'DAGGERHEART.General.tabs.attack'
+        }
+    };
+
+    _attachPartListeners(partId, htmlElement, options) {
+        super._attachPartListeners(partId, htmlElement, options);
+
+        htmlElement.querySelector('.partner-value')?.addEventListener('change', this.onPartnerChange.bind(this));
+    }
+
+    async _prepareContext(_options) {
+        const context = await super._prepareContext(_options);
+        context.document = this.actor;
+        context.tabs = this._getTabs(this.constructor.TABS);
+        context.systemFields = this.actor.system.schema.fields;
+        context.systemFields.attack.fields = this.actor.system.attack.schema.fields;
+        context.isNPC = true;
+        context.playerCharacters = game.actors
+            .filter(
+                x =>
+                    x.type === 'character' &&
+                    (x.testUserPermission(game.user, CONST.DOCUMENT_OWNERSHIP_LEVELS.OWNER) ||
+                        this.document.system.partner?.uuid === x.uuid)
+            )
+            .map(x => ({ key: x.uuid, name: x.name }));
+
+        return context;
+    }
+
+    _getTabs(tabs) {
+        for (const v of Object.values(tabs)) {
+            v.active = this.tabGroups[v.group] ? this.tabGroups[v.group] === v.id : v.active;
+            v.cssClass = v.active ? 'active' : '';
+        }
+
+        return tabs;
+    }
+
+    async onPartnerChange(event) {
+        const partnerDocument = event.target.value
+            ? await foundry.utils.fromUuid(event.target.value)
+            : this.actor.system.partner;
+        const partnerUpdate = { 'system.companion': event.target.value ? this.actor.uuid : null };
+
+        if (!partnerDocument.testUserPermission(game.user, CONST.DOCUMENT_OWNERSHIP_LEVELS.OWNER)) {
+            await game.socket.emit(`system.${SYSTEM.id}`, {
+                action: socketEvent.GMUpdate,
+                data: {
+                    action: GMUpdateEvent.UpdateDocument,
+                    uuid: partnerDocument.uuid,
+                    update: update
+                }
+            });
+        } else {
+            await partnerDocument.update(partnerUpdate);
+        }
+
+        await this.actor.update({ 'system.partner': event.target.value });
+
+        if (!event.target.value) {
+            await this.actor.updateLevel(1);
+        }
+
+        this.render();
+    }
+
+    async viewActor(_, button) {
+        const target = button.closest('[data-item-uuid]');
+        const actor = await foundry.utils.fromUuid(target.dataset.itemUuid);
+        if (!actor) return;
+
+        actor.sheet.render(true);
+    }
+
+    static async levelUp() {
+        new DhCompanionlevelUp(this.actor).render(true);
+    }
+
+    static async updateForm(event, _, formData) {
+        await this.actor.update(formData.object);
+        this.render();
+    }
+}

module/applications/sheets/companion.mjs

@@ -1,86 +0,0 @@
-import { GMUpdateEvent, socketEvent } from '../../helpers/socket.mjs';
-import DhCompanionlevelUp from '../levelup/companionLevelup.mjs';
-import DaggerheartSheet from './daggerheart-sheet.mjs';
-
-const { ActorSheetV2 } = foundry.applications.sheets;
-export default class DhCompanionSheet extends DaggerheartSheet(ActorSheetV2) {
-    static DEFAULT_OPTIONS = {
-        tag: 'form',
-        classes: ['daggerheart', 'sheet', 'actor', 'dh-style', 'companion'],
-        position: { width: 700, height: 1000 },
-        actions: {
-            attackRoll: this.attackRoll,
-            levelUp: this.levelUp
-        },
-        form: {
-            handler: this.updateForm,
-            submitOnChange: true,
-            closeOnSubmit: false
-        }
-    };
-
-    static PARTS = {
-        sidebar: { template: 'systems/daggerheart/templates/sheets/actors/companion/tempMain.hbs' }
-    };
-
-    _attachPartListeners(partId, htmlElement, options) {
-        super._attachPartListeners(partId, htmlElement, options);
-
-        htmlElement.querySelector('.partner-value')?.addEventListener('change', this.onPartnerChange.bind(this));
-    }
-
-    async _prepareContext(_options) {
-        const context = await super._prepareContext(_options);
-        context.document = this.document;
-        context.playerCharacters = game.actors
-            .filter(
-                x =>
-                    x.type === 'character' &&
-                    (x.ownership.default === 3 ||
-                        x.ownership[game.user.id] === 3 ||
-                        this.document.system.partner?.uuid === x.uuid)
-            )
-            .map(x => ({ key: x.uuid, name: x.name }));
-
-        return context;
-    }
-
-    static async updateForm(event, _, formData) {
-        await this.document.update(formData.object);
-        this.render();
-    }
-
-    async onPartnerChange(event) {
-        const partnerDocument = event.target.value
-            ? await foundry.utils.fromUuid(event.target.value)
-            : this.document.system.partner;
-        const partnerUpdate = { 'system.companion': event.target.value ? this.document.uuid : null };
-
-        if (!partnerDocument.testUserPermission(game.user, CONST.DOCUMENT_OWNERSHIP_LEVELS.OWNER)) {
-            await game.socket.emit(`system.${SYSTEM.id}`, {
-                action: socketEvent.GMUpdate,
-                data: {
-                    action: GMUpdateEvent.UpdateDocument,
-                    uuid: partnerDocument.uuid,
-                    update: update
-                }
-            });
-        } else {
-            await partnerDocument.update(partnerUpdate);
-        }
-
-        await this.document.update({ 'system.partner': event.target.value });
-
-        if (!event.target.value) {
-            await this.document.updateLevel(1);
-        }
-    }
-
-    static async attackRoll(event) {
-        this.actor.system.attack.use(event);
-    }
-
-    static async levelUp() {
-        new DhCompanionlevelUp(this.document).render(true);
-    }
-}

module/applications/ux/_module.mjs

@@ -0,0 +1 @@
+export { default as FilterMenu } from './filter-menu.mjs';

module/applications/ux/filter-menu.mjs

@@ -0,0 +1,237 @@
+/**
+ * @typedef {Object} FilterItem
+ * @property {string} group - The group name this filter belongs to (e.g., "Type").
+ * @property {string} name - The display name of the filter (e.g., "Weapons").
+ * @property {import("@client/applications/ux/search-filter.mjs").FieldFilter} filter - The filter condition.
+ */
+
+export default class FilterMenu extends foundry.applications.ux.ContextMenu {
+    /**
+     * Filter Menu
+     * @param {HTMLElement} container - Container element
+     * @param {string} selector - CSS selector for menu targets
+     * @param {Array} menuItems - Array of menu entries
+     * @param {Function} callback - Callback when filters change
+     * @param {Object} [options] - Additional options
+     */
+    constructor(container, selector, menuItems, callback, options = {}) {
+        // Set default options
+        const mergedOptions = {
+            eventName: 'click',
+            fixed: true,
+            ...options
+        };
+
+        super(container, selector, menuItems, mergedOptions);
+
+        // Initialize filter states
+        this.menuItems = menuItems.map(item => ({
+            ...item,
+            enabled: false
+        }));
+
+        this.callback = callback;
+        this.contentElement = container.querySelector(mergedOptions.contentSelector);
+
+        const syntheticEvent = {
+            type: 'pointerdown',
+            bubbles: true,
+            cancelable: true,
+            pointerType: 'mouse',
+            isPrimary: true,
+            button: 0
+        };
+
+        this.callback(syntheticEvent, this.contentElement, this.getActiveFilterData());
+    }
+
+    /** @inheritdoc */
+    async render(target, options = {}) {
+        await super.render(target, { ...options, animate: false });
+
+        // Create menu structure
+        const menu = document.createElement('menu');
+        menu.className = 'filter-menu';
+
+        // Group items by their group property
+        const groups = this.#groupItems(this.menuItems);
+
+        // Create sections for each group
+        for (const [groupName, items] of Object.entries(groups)) {
+            if (!items.length) continue;
+
+            const section = this.#createSection(groupName, items);
+            menu.appendChild(section);
+        }
+
+        // Update menu and set position
+        this.element.replaceChildren(menu);
+
+        menu.addEventListener('click', this.#handleClick.bind(this));
+
+        this._setPosition(this.element, target, options);
+
+        if (options.animate !== false) await this._animate(true);
+        return this._onRender(options);
+    }
+
+    /**
+     * Groups an array of items by their `group`.
+     * @param {Array<Object>} items - The array of items to group. Each item is expected to have an optional `group` property.
+     * @returns {Object<string, Array<Object>>} An object where keys are group names and values are arrays of items belonging to each group.
+     */
+    #groupItems(items) {
+        return items.reduce((groups, item) => {
+            const group = item.group ?? '_none';
+            groups[group] = groups[group] || [];
+            groups[group].push(item);
+            return groups;
+        }, {});
+    }
+
+    /**
+     * Creates a DOM section element for a group of items with corresponding filter buttons.
+     * @param {string} groupName - The name of the group, used as the section label.
+     * @param {Array<Object>} items - The items to create buttons for. Each item should have:
+     * @returns {HTMLDivElement} The section DOM element containing the label and buttons.
+     */
+    #createSection(groupName, items) {
+        const section = document.createElement('fieldset');
+        section.className = 'filter-section';
+
+        const header = document.createElement('legend');
+        header.textContent = groupName;
+        section.appendChild(header);
+
+        const buttons = document.createElement('div');
+        buttons.className = 'filter-buttons';
+
+        items.forEach(item => {
+            const button = document.createElement('button');
+            button.className = `filter-button ${item.enabled ? 'active' : ''}`;
+            button.textContent = item.name;
+            item.element = button;
+            buttons.appendChild(button);
+        });
+
+        section.appendChild(buttons);
+        return section;
+    }
+
+    /**
+     * Get filter data from active filters
+     * @returns {Array} Array of filter configurations
+     */
+    getActiveFilterData() {
+        return this.menuItems.filter(item => item.enabled).map(item => item.filter);
+    }
+
+    /**
+     * Handles click events on filter buttons.
+     * Toggles the active state of the clicked button and updates the corresponding item's `enabled` state.
+     * Then triggers the provided callback with the event, the content element, and the current active filter data.
+     * @param {PointerEvent} event - The click event triggered by interacting with a filter button.
+     * @returns {void}
+     */
+    #handleClick(event) {
+        event.preventDefault();
+        event.stopPropagation();
+
+        const button = event.target.closest('.filter-button');
+        if (!button) return;
+
+        const clickedItem = this.menuItems.find(item => item.element === button);
+        if (!clickedItem) return;
+
+        const isActive = button.classList.toggle('active');
+        clickedItem.enabled = isActive;
+
+        const filters = this.getActiveFilterData();
+
+        if (filters.length > 0) {
+            this.target.classList.add('fa-beat', 'active');
+        } else {
+            this.target.classList.remove('fa-beat', 'active');
+        }
+
+        this.callback(event, this.contentElement, filters);
+    }
+
+    /**
+     * Generate and return a sorted array of inventory filters.
+     * @returns {Array<Object>} An array of filter objects, sorted by name within each group.
+     */
+    static get invetoryFilters() {
+        const { OPERATORS } = foundry.applications.ux.SearchFilter;
+
+        const typesFilters = Object.entries(CONFIG.Item.dataModels)
+            .filter(([, { metadata }]) => metadata.isInventoryItem)
+            .map(([type, { metadata }]) => ({
+                group: game.i18n.localize('Type'),
+                name: game.i18n.localize(metadata.label),
+                filter: {
+                    field: 'type',
+                    operator: OPERATORS.EQUALS,
+                    value: type
+                }
+            }));
+
+        const burdenFilter = Object.values(CONFIG.daggerheart.GENERAL.burden).map(({ value, label }) => ({
+            group: game.i18n.localize('DAGGERHEART.Sheets.Weapon.Burden'),
+            name: game.i18n.localize(label),
+            filter: {
+                field: 'system.burden',
+                operator: OPERATORS.EQUALS,
+                value: value
+            }
+        }));
+
+        const damageTypeFilter = Object.values(CONFIG.daggerheart.GENERAL.damageTypes).map(({ id, abbreviation }) => ({
+            group: 'Damage Type', //TODO localize
+            name: game.i18n.localize(abbreviation),
+            filter: {
+                field: 'system.damage.type',
+                operator: OPERATORS.EQUALS,
+                value: id
+            }
+        }));
+
+        return [
+            ...game.i18n.sortObjects(typesFilters, 'name'),
+            ...game.i18n.sortObjects(burdenFilter, 'name'),
+            ...game.i18n.sortObjects(damageTypeFilter, 'name')
+        ];
+    }
+
+    /**
+     * Generate and return a sorted array of inventory filters.
+     * @returns {Array<Object>} An array of filter objects, sorted by name within each group.
+     */
+    static get cardsFilters() {
+        const { OPERATORS } = foundry.applications.ux.SearchFilter;
+
+        const typesFilters = Object.values(CONFIG.daggerheart.DOMAIN.cardTypes).map(({ id, label }) => ({
+            group: game.i18n.localize('Type'),
+            name: game.i18n.localize(label),
+            filter: {
+                field: 'system.type',
+                operator: OPERATORS.EQUALS,
+                value: id
+            }
+        }));
+
+        const domainFilter = Object.values(CONFIG.daggerheart.DOMAIN.domains).map(({ id, label }) => ({
+            group: game.i18n.localize('DAGGERHEART.Sheets.DomainCard.Domain'),
+            name: game.i18n.localize(label),
+            filter: {
+                field: 'system.domain',
+                operator: OPERATORS.EQUALS,
+                value: id
+            }
+        }));
+
+        const sort = arr => game.i18n.sortObjects(arr, 'name');
+
+        return [...sort(typesFilters), ...sort(domainFilter)];
+    }
+}

module/data/actor/companion.mjs

@@ -47,6 +47,7 @@ export default class DhCompanion extends BaseDataActor {
             attack: new ActionField({
                 initial: {
                     name: 'Attack',
+                    img: 'icons/creatures/claws/claw-bear-paw-swipe-brown.webp',
                     _id: foundry.utils.randomID(),
                     systemPath: 'attack',
                     type: 'attack',
@@ -57,7 +58,8 @@ export default class DhCompanion extends BaseDataActor {
                     },
                     roll: {
                         type: 'weapon',
-                        bonus: 0
+                        bonus: 0,
+                        trait: 'instinct'
                     },
                     damage: {
                         parts: [
@@ -77,8 +79,10 @@ export default class DhCompanion extends BaseDataActor {
         };
     }
 
-    get attackBonus() {
+    get traits() {
-        return this.attack.roll.bonus ?? 0;
+        return {
+            instinct: { total: this.attack.roll.bonus }
+        };
     }
 
     prepareBaseData() {

module/documents/actor.mjs

@@ -126,6 +126,7 @@ export default class DhpActor extends Actor {
                     }
                 }
             });
+            this.sheet.render();
 
             if (this.system.companion) {
                 this.system.companion.updateLevel(newLevel);
@@ -307,6 +308,7 @@ export default class DhpActor extends Actor {
                 }
             }
         });
+        this.sheet.render();
 
         if (this.system.companion) {
             this.system.companion.updateLevel(this.system.levelData.level.changed);
@@ -338,7 +340,7 @@ export default class DhpActor extends Actor {
     }
 
     get rollClass() {
-        return CONFIG.Dice.daggerheart[this.type === 'character' ? 'DualityRoll' : 'D20Roll'];
+        return CONFIG.Dice.daggerheart[['character', 'companion'].includes(this.type) ? 'DualityRoll' : 'D20Roll'];
     }
 
     getRollData() {

module/helpers/utils.mjs

@@ -124,13 +124,13 @@ export const getCommandTarget = () => {
 
 export const setDiceSoNiceForDualityRoll = (rollResult, advantageState) => {
     const diceSoNicePresets = getDiceSoNicePresets();
-    rollResult.dice[0].options.appearance = diceSoNicePresets.hope;
+    rollResult.dice[0].options = { appearance: diceSoNicePresets.hope };
-    rollResult.dice[1].options.appearance = diceSoNicePresets.fear;
+    rollResult.dice[1].options = { appearance: diceSoNicePresets.fear }; //diceSoNicePresets.fear;
     if (rollResult.dice[2]) {
         if (advantageState === true) {
-            rollResult.dice[2].options.appearance = diceSoNicePresets.advantage;
+            rollResult.dice[2].options = { appearance: diceSoNicePresets.advantage };
         } else if (advantageState === false) {
-            rollResult.dice[2].options.appearance = diceSoNicePresets.disadvantage;
+            rollResult.dice[2].options = { appearance: diceSoNicePresets.disadvantage };
         }
     }
 };

styles/daggerheart.css

@@ -4206,6 +4206,10 @@ div.daggerheart.views.multiclass {
 .application.sheet.daggerheart.actor.dh-style.character .tab.loadout .search-section .search-bar input:placeholder {
   color: light-dark(#18162e50, #efe6d850);
 }
+.application.sheet.daggerheart.actor.dh-style.character .tab.loadout .search-section .search-bar input::-webkit-search-cancel-button {
+  -webkit-appearance: none;
+  display: none;
+}
 .application.sheet.daggerheart.actor.dh-style.character .tab.loadout .search-section .search-bar .icon {
   align-content: center;
   height: 32px;
@@ -5032,13 +5036,248 @@ div.daggerheart.views.multiclass {
 .application.daggerheart.dh-style.views.beastform-selection footer button {
   flex: 1;
 }
-.application.sheet.daggerheart.actor.dh-style.companion .profile {
+.application.sheet.daggerheart.actor.dh-style.companion .companion-header-sheet {
-  height: 80px;
+  display: flex;
-  width: 80px;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
 }
-.application.sheet.daggerheart.actor.dh-style.companion .temp-container {
+.application.sheet.daggerheart.actor.dh-style.companion .companion-header-sheet .profile {
+  height: 235px;
+  width: 100%;
+  object-fit: cover;
+  cursor: pointer;
+  mask-image: linear-gradient(0deg, transparent 0%, black 10%);
+}
+.application.sheet.daggerheart.actor.dh-style.companion .companion-header-sheet .actor-name {
+  display: flex;
+  align-items: center;
   position: relative;
-  top: 32px;
+  top: -30px;
+  gap: 20px;
+  padding: 0 20px;
+  margin-bottom: -30px;
+}
+.application.sheet.daggerheart.actor.dh-style.companion .companion-header-sheet .actor-name input[type='text'] {
+  font-size: 24px;
+  height: 32px;
+  text-align: center;
+  border: 1px solid transparent;
+  outline: 2px solid transparent;
+  transition: all 0.3s ease;
+}
+.application.sheet.daggerheart.actor.dh-style.companion .companion-header-sheet .actor-name input[type='text']:hover {
+  outline: 2px solid light-dark(#222, #f3c267);
+}
+.application.sheet.daggerheart.actor.dh-style.companion .companion-header-sheet .status-section {
+  display: flex;
+  gap: 5px;
+  justify-content: center;
+}
+.application.sheet.daggerheart.actor.dh-style.companion .companion-header-sheet .status-section .status-number {
+  justify-items: center;
+}
+.application.sheet.daggerheart.actor.dh-style.companion .companion-header-sheet .status-section .status-number .status-value {
+  position: relative;
+  display: flex;
+  width: 50px;
+  height: 40px;
+  border: 1px solid light-dark(#18162e, #f3c267);
+  border-bottom: none;
+  border-radius: 6px 6px 0 0;
+  padding: 0 6px;
+  font-size: 1.5rem;
+  align-items: center;
+  justify-content: center;
+  background: light-dark(transparent, #18162e);
+  z-index: 2;
+}
+.application.sheet.daggerheart.actor.dh-style.companion .companion-header-sheet .status-section .status-number .status-value.armor-slots {
+  width: 80px;
+  height: 30px;
+}
+.application.sheet.daggerheart.actor.dh-style.companion .companion-header-sheet .status-section .status-number .status-label {
+  padding: 2px 10px;
+  width: 100%;
+  border-radius: 3px;
+  background: light-dark(#18162e, #f3c267);
+}
+.application.sheet.daggerheart.actor.dh-style.companion .companion-header-sheet .status-section .status-number .status-label h4 {
+  font-weight: bold;
+  text-align: center;
+  line-height: 18px;
+  font-size: 12px;
+  color: light-dark(#efe6d8, #18162e);
+}
+.application.sheet.daggerheart.actor.dh-style.companion .companion-header-sheet .status-section .status-bar {
+  position: relative;
+  width: 100px;
+  height: 40px;
+  justify-items: center;
+}
+.application.sheet.daggerheart.actor.dh-style.companion .companion-header-sheet .status-section .status-bar .status-label {
+  position: relative;
+  top: 40px;
+  height: 22px;
+  width: 79px;
+  clip-path: path('M0 0H79L74 16.5L39 22L4 16.5L0 0Z');
+  background: light-dark(#18162e, #f3c267);
+}
+.application.sheet.daggerheart.actor.dh-style.companion .companion-header-sheet .status-section .status-bar .status-label h4 {
+  font-weight: bold;
+  text-align: center;
+  line-height: 18px;
+  color: light-dark(#efe6d8, #18162e);
+}
+.application.sheet.daggerheart.actor.dh-style.companion .companion-header-sheet .status-section .status-bar .status-value {
+  position: absolute;
+  display: flex;
+  padding: 0 6px;
+  font-size: 1.5rem;
+  align-items: center;
+  width: 100px;
+  height: 40px;
+  justify-content: center;
+  text-align: center;
+  z-index: 2;
+  color: #efe6d8;
+}
+.application.sheet.daggerheart.actor.dh-style.companion .companion-header-sheet .status-section .status-bar .status-value input[type='number'] {
+  background: transparent;
+  font-size: 1.5rem;
+  width: 40px;
+  height: 30px;
+  text-align: center;
+  border: none;
+  outline: 2px solid transparent;
+  color: #efe6d8;
+}
+.application.sheet.daggerheart.actor.dh-style.companion .companion-header-sheet .status-section .status-bar .status-value input[type='number'].bar-input {
+  padding: 0;
+  color: #efe6d8;
+  backdrop-filter: none;
+  background: transparent;
+  transition: all 0.3s ease;
+}
+.application.sheet.daggerheart.actor.dh-style.companion .companion-header-sheet .status-section .status-bar .status-value input[type='number'].bar-input:hover,
+.application.sheet.daggerheart.actor.dh-style.companion .companion-header-sheet .status-section .status-bar .status-value input[type='number'].bar-input:focus {
+  background: rgba(24, 22, 46, 0.33);
+  backdrop-filter: blur(9.5px);
+}
+.application.sheet.daggerheart.actor.dh-style.companion .companion-header-sheet .status-section .status-bar .status-value .bar-label {
+  width: 40px;
+}
+.application.sheet.daggerheart.actor.dh-style.companion .companion-header-sheet .status-section .status-bar .progress-bar {
+  position: absolute;
+  appearance: none;
+  width: 100px;
+  height: 40px;
+  border: 1px solid light-dark(#18162e, #f3c267);
+  border-radius: 6px;
+  z-index: 1;
+  background: #18162e;
+}
+.application.sheet.daggerheart.actor.dh-style.companion .companion-header-sheet .status-section .status-bar .progress-bar::-webkit-progress-bar {
+  border: none;
+  background: #18162e;
+  border-radius: 6px;
+}
+.application.sheet.daggerheart.actor.dh-style.companion .companion-header-sheet .status-section .status-bar .progress-bar::-webkit-progress-value {
+  background: linear-gradient(15deg, #46140a 0%, #be0000 42%, #fcb045 100%);
+  border-radius: 6px;
+}
+.application.sheet.daggerheart.actor.dh-style.companion .companion-header-sheet .status-section .status-bar .progress-bar.stress-color::-webkit-progress-value {
+  background: linear-gradient(15deg, #823b01 0%, #fc8e45 65%, #be0000 100%);
+  border-radius: 6px;
+}
+.application.sheet.daggerheart.actor.dh-style.companion .companion-header-sheet .status-section .status-bar .progress-bar::-moz-progress-bar {
+  background: linear-gradient(15deg, #46140a 0%, #be0000 42%, #fcb045 100%);
+  border-radius: 6px;
+}
+.application.sheet.daggerheart.actor.dh-style.companion .companion-header-sheet .status-section .status-bar .progress-bar.stress-color::-moz-progress-bar {
+  background: linear-gradient(15deg, #823b01 0%, #fc8e45 65%, #be0000 100%);
+  border-radius: 6px;
+}
+.application.sheet.daggerheart.actor.dh-style.companion .companion-header-sheet .status-section .level-up-label {
+  font-size: 24px;
+  padding-top: 8px;
+}
+.application.sheet.daggerheart.actor.dh-style.companion .companion-header-sheet .companion-navigation {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  width: 100%;
+}
+.application.sheet.daggerheart.actor.dh-style.companion .partner-section,
+.application.sheet.daggerheart.actor.dh-style.companion .attack-section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.application.sheet.daggerheart.actor.dh-style.companion .partner-section .title,
+.application.sheet.daggerheart.actor.dh-style.companion .attack-section .title {
+  display: flex;
+  gap: 15px;
+  align-items: center;
+}
+.application.sheet.daggerheart.actor.dh-style.companion .partner-section .title h3,
+.application.sheet.daggerheart.actor.dh-style.companion .attack-section .title h3 {
+  font-size: 20px;
+}
+.application.sheet.daggerheart.actor.dh-style.companion .partner-section .items-list,
+.application.sheet.daggerheart.actor.dh-style.companion .attack-section .items-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  align-items: center;
+}
+.application.sheet.daggerheart.actor.dh-style.companion .partner-placeholder {
+  display: flex;
+  opacity: 0.6;
+  text-align: center;
+  font-style: italic;
+  justify-content: center;
+}
+.application.sheet.daggerheart.actor.dh-style.companion .experience-list {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  width: 100%;
+  margin-top: 10px;
+  align-items: center;
+}
+.application.sheet.daggerheart.actor.dh-style.companion .experience-list .experience-row {
+  display: flex;
+  gap: 5px;
+  width: 250px;
+  align-items: center;
+  justify-content: space-between;
+}
+.application.sheet.daggerheart.actor.dh-style.companion .experience-list .experience-row .experience-name {
+  width: 180px;
+  text-align: start;
+  font-size: 14px;
+  font-family: 'Montserrat', sans-serif;
+  color: light-dark(#222, #efe6d8);
+}
+.application.sheet.daggerheart.actor.dh-style.companion .experience-list .experience-value {
+  height: 25px;
+  width: 35px;
+  font-size: 14px;
+  font-family: 'Montserrat', sans-serif;
+  color: light-dark(#222, #efe6d8);
+  align-content: center;
+  text-align: center;
+  background: url(../assets/svg/experience-shield.svg) no-repeat;
+}
+.theme-light .application.sheet.daggerheart.actor.dh-style.companion .experience-list .experience-value {
+  background: url('../assets/svg/experience-shield-light.svg') no-repeat;
+}
+.theme-light .application.sheet.daggerheart.actor.dh-style.companion {
+  background: url('../assets/parchments/dh-parchment-light.png');
+}
+.theme-dark .application.sheet.daggerheart.actor.dh-style.companion {
+  background-image: url('../assets/parchments/dh-parchment-dark.png');
 }
 .application.sheet.daggerheart.actor.dh-style.adversary .window-content {
   overflow: auto;
@@ -5333,6 +5572,19 @@ div.daggerheart.views.multiclass {
   box-shadow: none;
   outline: 2px solid light-dark(#222, #efe6d8);
 }
+.application.dh-style input[type='text']:disabled[type='text'],
+.application.dh-style input[type='number']:disabled[type='text'],
+.application.dh-style input[type='text']:disabled[type='number'],
+.application.dh-style input[type='number']:disabled[type='number'] {
+  outline: 2px solid transparent;
+  cursor: not-allowed;
+}
+.application.dh-style input[type='text']:disabled[type='text']:hover,
+.application.dh-style input[type='number']:disabled[type='text']:hover,
+.application.dh-style input[type='text']:disabled[type='number']:hover,
+.application.dh-style input[type='number']:disabled[type='number']:hover {
+  background: transparent;
+}
 .application.dh-style input[type='checkbox']:checked::after {
   color: light-dark(#222, #f3c267);
 }
@@ -5356,6 +5608,16 @@ div.daggerheart.views.multiclass {
 .application.dh-style button.glow {
   animation: glow 0.75s infinite alternate;
 }
+.application.dh-style button:disabled {
+  background: light-dark(transparent, #f3c267);
+  color: light-dark(#18162e, #18162e);
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+.application.dh-style button:disabled:hover {
+  background: light-dark(transparent, #f3c267);
+  color: light-dark(#18162e, #18162e);
+}
 .application.dh-style select {
   background: light-dark(transparent, transparent);
   color: light-dark(#222, #efe6d8);
@@ -6139,6 +6401,44 @@ div.daggerheart.views.multiclass {
 .application prose-mirror .editor-content h3 {
   font-size: 24px;
 }
+.filter-menu {
+  width: auto;
+}
+.filter-menu fieldset.filter-section {
+  align-items: center;
+  margin: 5px;
+  border-radius: 6px;
+  border-color: light-dark(#18162e, #f3c267);
+  padding: 5px;
+}
+.filter-menu fieldset.filter-section legend {
+  font-family: 'Montserrat', sans-serif;
+  font-weight: bold;
+  color: light-dark(#18162e, #f3c267);
+  font-size: var(--font-size-12);
+}
+.filter-menu fieldset.filter-section .filter-buttons {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-evenly;
+  gap: 5px;
+}
+.filter-menu fieldset.filter-section .filter-buttons button {
+  background: light-dark(rgba(0, 0, 0, 0.3), #18162e);
+  color: light-dark(#18162e, #f3c267);
+  outline: none;
+  box-shadow: none;
+  border: 1px solid light-dark(#18162e, #18162e);
+  padding: 0 0.2rem;
+  font-size: var(--font-size-12);
+}
+.filter-menu fieldset.filter-section .filter-buttons button:hover {
+  background: light-dark(transparent, #f3c267);
+  color: light-dark(#18162e, #18162e);
+}
+.filter-menu fieldset.filter-section .filter-buttons button.active {
+  animation: glow 0.75s infinite alternate;
+}
 .daggerheart {
   /* Flex */
   /****/

styles/daggerheart.less

@@ -42,6 +42,8 @@
 
 @import './less/applications//beastform.less';
 
+@import './less/actors/companion/header.less';
+@import './less/actors/companion/details.less';
 @import './less/actors/companion/sheet.less';
 
 @import './less/actors/adversary.less';
@@ -67,6 +69,8 @@
 @import './less/global/inventory-item.less';
 @import './less/global/inventory-fieldset-items.less';
 @import './less/global/prose-mirror.less';
+@import './less/global/filter-menu.less';
+
 @import '../node_modules/@yaireo/tagify/dist/tagify.css';
 
 .daggerheart {

styles/less/actors/character/loadout.less

@@ -30,6 +30,11 @@
                     &:placeholder {
                         color: light-dark(@dark-blue-50, @beige-50);
                     }
+
+                    &::-webkit-search-cancel-button {
+                        -webkit-appearance: none;
+                        display: none;
+                    }
                 }
 
                 .icon {

styles/less/actors/companion/details.less

@@ -0,0 +1,75 @@
+@import '../../utils/colors.less';
+@import '../../utils/fonts.less';
+
+.application.sheet.daggerheart.actor.dh-style.companion {
+    .partner-section,
+    .attack-section {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .title {
+            display: flex;
+            gap: 15px;
+            align-items: center;
+
+            h3 {
+                font-size: 20px;
+            }
+        }
+        .items-list {
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            align-items: center;
+        }
+    }
+
+    .partner-placeholder {
+        display: flex;
+        opacity: 0.6;
+        text-align: center;
+        font-style: italic;
+        justify-content: center;
+    }
+
+    .experience-list {
+        display: flex;
+        flex-direction: column;
+        gap: 5px;
+        width: 100%;
+        margin-top: 10px;
+        align-items: center;
+
+        .experience-row {
+            display: flex;
+            gap: 5px;
+            width: 250px;
+            align-items: center;
+            justify-content: space-between;
+
+            .experience-name {
+                width: 180px;
+                text-align: start;
+                font-size: 14px;
+                font-family: @font-body;
+                color: light-dark(@dark, @beige);
+            }
+        }
+
+        .experience-value {
+            height: 25px;
+            width: 35px;
+            font-size: 14px;
+            font-family: @font-body;
+            color: light-dark(@dark, @beige);
+            align-content: center;
+            text-align: center;
+            background: url(../assets/svg/experience-shield.svg) no-repeat;
+
+            .theme-light & {
+                background: url('../assets/svg/experience-shield-light.svg') no-repeat;
+            }
+        }
+    }
+}

styles/less/actors/companion/header.less

@@ -0,0 +1,197 @@
+@import '../../utils/colors.less';
+@import '../../utils/fonts.less';
+
+.application.sheet.daggerheart.actor.dh-style.companion {
+    .companion-header-sheet {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 8px;
+
+        .profile {
+            height: 235px;
+            width: 100%;
+            object-fit: cover;
+            cursor: pointer;
+            mask-image: linear-gradient(0deg, transparent 0%, black 10%);
+        }
+
+        .actor-name {
+            display: flex;
+            align-items: center;
+            position: relative;
+            top: -30px;
+            gap: 20px;
+            padding: 0 20px;
+            margin-bottom: -30px;
+
+            input[type='text'] {
+                font-size: 24px;
+                height: 32px;
+                text-align: center;
+                border: 1px solid transparent;
+                outline: 2px solid transparent;
+                transition: all 0.3s ease;
+
+                &:hover {
+                    outline: 2px solid light-dark(@dark, @golden);
+                }
+            }
+        }
+
+        .status-section {
+            display: flex;
+            gap: 5px;
+            justify-content: center;
+
+            .status-number {
+                justify-items: center;
+
+                .status-value {
+                    position: relative;
+                    display: flex;
+                    width: 50px;
+                    height: 40px;
+                    border: 1px solid light-dark(@dark-blue, @golden);
+                    border-bottom: none;
+                    border-radius: 6px 6px 0 0;
+                    padding: 0 6px;
+                    font-size: 1.5rem;
+                    align-items: center;
+                    justify-content: center;
+                    background: light-dark(transparent, @dark-blue);
+                    z-index: 2;
+
+                    &.armor-slots {
+                        width: 80px;
+                        height: 30px;
+                    }
+                }
+
+                .status-label {
+                    padding: 2px 10px;
+                    width: 100%;
+                    border-radius: 3px;
+                    background: light-dark(@dark-blue, @golden);
+
+                    h4 {
+                        font-weight: bold;
+                        text-align: center;
+                        line-height: 18px;
+                        font-size: 12px;
+                        color: light-dark(@beige, @dark-blue);
+                    }
+                }
+            }
+
+            .status-bar {
+                position: relative;
+                width: 100px;
+                height: 40px;
+                justify-items: center;
+
+                .status-label {
+                    position: relative;
+                    top: 40px;
+                    height: 22px;
+                    width: 79px;
+                    clip-path: path('M0 0H79L74 16.5L39 22L4 16.5L0 0Z');
+                    background: light-dark(@dark-blue, @golden);
+
+                    h4 {
+                        font-weight: bold;
+                        text-align: center;
+                        line-height: 18px;
+                        color: light-dark(@beige, @dark-blue);
+                    }
+                }
+                .status-value {
+                    position: absolute;
+                    display: flex;
+                    padding: 0 6px;
+                    font-size: 1.5rem;
+                    align-items: center;
+                    width: 100px;
+                    height: 40px;
+                    justify-content: center;
+                    text-align: center;
+                    z-index: 2;
+                    color: @beige;
+
+                    input[type='number'] {
+                        background: transparent;
+                        font-size: 1.5rem;
+                        width: 40px;
+                        height: 30px;
+                        text-align: center;
+                        border: none;
+                        outline: 2px solid transparent;
+                        color: @beige;
+
+                        &.bar-input {
+                            padding: 0;
+                            color: @beige;
+                            backdrop-filter: none;
+                            background: transparent;
+                            transition: all 0.3s ease;
+
+                            &:hover,
+                            &:focus {
+                                background: @semi-transparent-dark-blue;
+                                backdrop-filter: blur(9.5px);
+                            }
+                        }
+                    }
+
+                    .bar-label {
+                        width: 40px;
+                    }
+                }
+                .progress-bar {
+                    position: absolute;
+                    appearance: none;
+                    width: 100px;
+                    height: 40px;
+                    border: 1px solid light-dark(@dark-blue, @golden);
+                    border-radius: 6px;
+                    z-index: 1;
+                    background: @dark-blue;
+
+                    &::-webkit-progress-bar {
+                        border: none;
+                        background: @dark-blue;
+                        border-radius: 6px;
+                    }
+                    &::-webkit-progress-value {
+                        background: @gradient-hp;
+                        border-radius: 6px;
+                    }
+                    &.stress-color::-webkit-progress-value {
+                        background: @gradient-stress;
+                        border-radius: 6px;
+                    }
+                    &::-moz-progress-bar {
+                        background: @gradient-hp;
+                        border-radius: 6px;
+                    }
+                    &.stress-color::-moz-progress-bar {
+                        background: @gradient-stress;
+                        border-radius: 6px;
+                    }
+                }
+            }
+
+            .level-up-label {
+                font-size: 24px;
+                padding-top: 8px;
+            }
+        }
+
+        .companion-navigation {
+            display: flex;
+            gap: 8px;
+            align-items: center;
+            width: 100%;
+        }
+    }
+}

styles/less/actors/companion/sheet.less

@@ -1,11 +1,18 @@
 .application.sheet.daggerheart.actor.dh-style.companion {
-    .profile {
+    .theme-light & {
-        height: 80px;
+        background: url('../assets/parchments/dh-parchment-light.png');
-        width: 80px;
+    }
+    .theme-dark & {
+        background-image: url('../assets/parchments/dh-parchment-dark.png');
     }
 
-    .temp-container {
+    // .profile {
-        position: relative;
+    //     height: 80px;
-        top: 32px;
+    //     width: 80px;
-    }
+    // }
+
+    // .temp-container {
+    //     position: relative;
+    //     top: 32px;
+    // }
 }

styles/less/global/elements.less

@@ -23,6 +23,16 @@
             box-shadow: none;
             outline: 2px solid light-dark(@dark, @beige);
         }
+
+        &:disabled[type='text'],
+        &:disabled[type='number'] {
+            outline: 2px solid transparent;
+            cursor: not-allowed;
+
+            &:hover {
+                background: transparent;
+            }
+        }
     }
 
     input[type='checkbox'] {
@@ -52,6 +62,18 @@
         &.glow {
             animation: glow 0.75s infinite alternate;
         }
+
+        &:disabled {
+            background: light-dark(transparent, @golden);
+            color: light-dark(@dark-blue, @dark-blue);
+            opacity: 0.6;
+            cursor: not-allowed;
+
+            &:hover {
+                background: light-dark(transparent, @golden);
+                color: light-dark(@dark-blue, @dark-blue);
+            }
+        }
     }
 
     select {

styles/less/global/filter-menu.less

@@ -0,0 +1,47 @@
+@import '../utils/colors.less';
+@import '../utils/fonts.less';
+
+.filter-menu {
+    width: auto;
+
+    fieldset.filter-section {
+        align-items: center;
+        margin: 5px;
+        border-radius: 6px;
+        border-color: light-dark(@dark-blue, @golden);
+        padding: 5px;
+
+        legend {
+            font-family: @font-body;
+            font-weight: bold;
+            color: light-dark(@dark-blue, @golden);
+            font-size: var(--font-size-12);
+        }
+
+        .filter-buttons {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: space-evenly;
+            gap: 5px;
+
+            button {
+                background: light-dark(@light-black, @dark-blue);
+                color: light-dark(@dark-blue, @golden);
+                outline: none;
+                box-shadow: none;
+                border: 1px solid light-dark(@dark-blue, @dark-blue);
+                padding: 0 0.2rem;
+                font-size: var(--font-size-12);
+
+                &:hover {
+                    background: light-dark(transparent, @golden);
+                    color: light-dark(@dark-blue, @dark-blue);
+                }
+
+                &.active {
+                    animation: glow 0.75s infinite alternate;
+                }
+            }
+        }
+    }
+}

templates/chat/duality-roll.hbs

@@ -123,7 +123,7 @@
     <div class="dice-result">
         <div class="dice-tooltip">
             <div class="wrapper">
-                {{> 'systems/daggerheart/templates/chat/parts/damage-chat.hbs' damage=damage noTitle=true}}
+                {{!-- {{> 'systems/daggerheart/templates/chat/parts/damage-chat.hbs' damage=damage noTitle=true}} --}}
             </div>
         </div>
     </div>

templates/sheets/actors/character/inventory.hbs

@@ -10,7 +10,9 @@
             </div>
             <input type="search" name="search" class="search-inventory" placeholder="Search...">
         </div>
-        <a><i class="fa-solid fa-filter"></i></a>
+        <a class="filter-button">
+            <i class="fa-solid fa-filter"></i>
+        </a>
     </div>
     
     <div class="items-section">

templates/sheets/actors/character/loadout.hbs

@@ -10,7 +10,9 @@
             </div>
             <input type="search" name="search" class="search-loadout" placeholder="Search...">
         </div>
-        <a><i class="fa-solid fa-filter"></i></a>
+        <a class="filter-button">
+            <i class="fa-solid fa-filter"></i>
+        </a>
         <button class="btn-toggle-view" data-action="toggleLoadoutView" data-value="{{this.abilities.loadout.listView}}">
             <span class="{{#if this.abilities.loadout.listView}}list-active{{/if}} list-icon">
                 <i class="fa-solid fa-bars"></i>

templates/sheets/actors/companion/details.hbs

@@ -0,0 +1,43 @@
+<section
+    class='tab {{tabs.details.cssClass}} {{tabs.details.id}}'
+    data-tab='{{tabs.details.id}}'
+    data-group='{{tabs.details.group}}'
+>
+    <div class="partner-section">
+        <div class="title">
+            <side-line-div  class="invert"></side-line-div>
+            <h3>Partner</h3>
+            <side-line-div></side-line-div>
+        </div>
+        {{#if document.system.partner}}
+            <ul class="item-list">
+                {{> 'systems/daggerheart/templates/sheets/global/partials/inventory-item.hbs' item=document.system.partner type='actor' isSidebar=true isActor=true noTooltip=true}}
+            </ul>
+        {{else}}
+            <span class="partner-placeholder">{{localize "DAGGERHEART.Sheets.Companion.noPartner"}}</span>
+        {{/if}}
+    </div>
+    <div class="attack-section">
+        <div class="title">
+            <side-line-div  class="invert"></side-line-div>
+            <h3>Attack</h3>
+            <side-line-div></side-line-div>
+        </div>
+        <ul class="item-list">
+            {{> 'systems/daggerheart/templates/sheets/global/partials/inventory-item.hbs' item=source.system.attack type=source.system.attack.systemPath isSidebar=true isCompanion=true noTooltip=true}}
+        </ul>
+    </div>
+    <div class="experience-list">
+        {{#each source.system.experiences as |experience id|}}
+            <div class="experience-row">
+                <div class="experience-value">
+                    +{{experience.value}}
+                </div>
+                <span class="experience-name">{{experience.name}}</span>
+                <div class="controls">
+                    <a data-action="toChat" data-type="experience" data-uuid="{{id}}"><i class="fa-regular fa-message"></i></a>
+                </div>
+            </div>
+        {{/each}}
+    </div>
+</section>

templates/sheets/actors/companion/effects.hbs

@@ -0,0 +1,8 @@
+<section
+    class='tab {{tabs.effects.cssClass}} {{tabs.effects.id}}'
+    data-tab='{{tabs.effects.id}}'
+    data-group='{{tabs.effects.group}}'
+>
+    {{> 'systems/daggerheart/templates/sheets/global/partials/inventory-fieldset-items.hbs' title=(localize 'DAGGERHEART.Sheets.Global.activeEffects') type='effect'}}
+    {{> 'systems/daggerheart/templates/sheets/global/partials/inventory-fieldset-items.hbs' title=(localize 'DAGGERHEART.Sheets.Global.inativeEffects') type='effect'}}
+</section>

templates/sheets/actors/companion/header.hbs

@@ -0,0 +1,46 @@
+<header class="companion-header-sheet">
+    <img class="profile" src="{{document.img}}" alt="{{document.name}}" data-action='editImage' data-edit="img">
+    <h1 class='actor-name'>
+        <input
+            type='text'
+            name='name'
+            value='{{document.name}}'
+            placeholder='Actor Name'
+        />
+    </h1>
+    <div class="status-section">
+        <div class="status-number">
+            <div class='status-value'>
+                <p>{{document.system.evasion.total}}</p>
+            </div>
+            <div class="status-label">
+                <h4>Evasion</h4>
+            </div>
+        </div>
+        <div class="status-bar">
+            <div class='status-value'>
+                <p><input class="bar-input" name="system.resources.stress.value" value="{{document.system.resources.stress.value}}" type="number"></p>
+                <p>/</p>
+                <p class="bar-label">{{document.system.resources.stress.maxTotal}}</p>
+            </div>
+            <progress
+                class='progress-bar stress-color'
+                value='{{document.system.resources.stress.value}}'
+                max='{{document.system.resources.stress.maxTotal}}'
+            ></progress>
+            <div class="status-label">
+                <h4>Stress</h4>
+            </div>
+        </div>
+        <h3 class="level-up-label">
+            {{localize "DAGGERHEART.Sheets.Companion.Level"}}
+            {{source.system.levelData.level.changed}}
+        </h3>
+    </div>
+    <div class="companion-navigation">
+        {{> 'systems/daggerheart/templates/sheets/global/tabs/tab-navigation.hbs'}}
+        <button data-action="openSettings">
+            <i class="fa-solid fa-wrench"></i>
+        </button>
+    </div>
+</header>

templates/sheets/applications/companion-settings/attack.hbs

@@ -0,0 +1,21 @@
+<section
+    class="tab {{tabs.attack.cssClass}} {{tabs.attack.id}}"
+    data-tab="{{tabs.attack.id}}"
+    data-group="{{tabs.attack.group}}"
+>
+    <fieldset class="one-column">
+        <legend>{{localize "DAGGERHEART.General.basics"}}</legend>
+        {{formGroup systemFields.attack.fields.img value=document.system.attack.img label="Image Path" name="system.attack.img"}}
+        {{formGroup systemFields.attack.fields.name value=document.system.attack.name label="Attack Name" name="system.attack.name"}}
+    </fieldset>
+    <fieldset class="flex">
+        <legend>{{localize "DAGGERHEART.Sheets.Adversary.Attack"}}</legend>
+            {{formField systemFields.attack.fields.range value=document.system.attack.range label="Range" name="system.attack.range" localize=true}}
+            {{#if systemFields.attack.fields.target.fields}}
+                {{ formField systemFields.attack.fields.target.fields.type value=document.system.attack.target.type label="Target" name="system.attack.target.type" localize=true }}
+                {{#if (and document.system.attack.target.type (not (eq document.system.attack.target.type 'self')))}}
+                    {{ formField systemFields.attack.fields.target.fields.amount value=document.system.attack.target.amount label="Amount" name="system.attack.target.amount" }}
+                {{/if}}
+            {{/if}}
+    </fieldset>
+</section>

templates/sheets/applications/companion-settings/details.hbs

@@ -0,0 +1,23 @@
+<section
+    class='tab {{tabs.details.cssClass}} {{tabs.details.id}}'
+    data-tab='{{tabs.details.id}}'
+    data-group='{{tabs.details.group}}'
+>
+    <fieldset class="one-column">
+        <legend>{{localize 'DAGGERHEART.General.basics'}}</legend>
+        <div class="nest-inputs">
+            {{formGroup systemFields.evasion.fields.value value=document.system.evasion.value localize=true}}
+            {{formGroup systemFields.resources.fields.stress.fields.value value=document.system.resources.stress.value label='Current Stress'}}
+            {{formGroup systemFields.resources.fields.stress.fields.max value=document.system.resources.stress.max label='Max Stress'}}
+        </div>
+        <div class="form-group">
+        <div class="form-fields">
+            <label>{{localize "DAGGERHEART.Sheets.Companion.FIELDS.partner.label"}}</label>
+            <select class="partner-value">
+                {{selectOptions playerCharacters selected=document.system.partner.uuid labelAttr="name" valueAttr="key" blank=""}}
+            </select>
+        </div>
+    </div>
+    </fieldset>
+    <button data-action="levelUp" {{#if (not document.system.levelData.canLevelUp)}}disabled{{/if}}>Level Up</button>
+</section>

templates/sheets/applications/companion-settings/experiences.hbs

@@ -0,0 +1,18 @@
+<section
+    class='tab {{tabs.experiences.cssClass}} {{tabs.experiences.id}}'
+    data-tab='{{tabs.experiences.id}}'
+    data-group='{{tabs.experiences.group}}'
+>
+    <fieldset>
+        <legend>{{localize tabs.experiences.label}}</legend>
+        <ul class="experience-list">
+            {{#each document.system.experiences as |experience key|}}
+                <li class="experience-item">
+                    <input class="name" type="text" name="system.experiences.{{key}}.name" value="{{experience.name}}" />
+                    <input disabled class="modifier" type="text" name="system.experiences.{{key}}.value" value="{{experience.value}}" data-dtype="Number" />
+                </li>
+            {{/each}}
+        </ul>
+    </fieldset>
+
+</section>

templates/sheets/applications/companion-settings/header.hbs

@@ -0,0 +1,3 @@
+<header class="dialog-header">
+    <h1>{{document.name}}</h1>
+</header>

templates/sheets/global/partials/inventory-item.hbs

@@ -1,7 +1,11 @@
-<li class="inventory-item" data-item-id="{{item.id}}" data-item-uuid="{{item.uuid}}" data-companion="{{companion}}" data-type="{{type}}" data-tooltip="{{concat "#item#" item.uuid}}">
+<li class="inventory-item" data-item-id="{{item.id}}" data-item-uuid="{{item.uuid}}" data-companion="{{companion}}" {{#if (not noTooltip)}}data-tooltip="{{concat "#item#" item.uuid}}"{{/if}}>
     <img src="{{item.img}}" class="item-img {{#if isActor}}actor-img{{/if}}" data-action="useItem"/>
     <div class="item-label">
-        <div class="item-name">{{item.name}}</div>
+        {{#if isCompanion}}
+            <a class="item-name" data-action="attackRoll">{{item.name}}</a>
+        {{else}}
+            <div class="item-name">{{item.name}}</div>
+        {{/if}}
         {{#if  (eq type 'weapon')}}
             <div class="item-tags">
                 {{#if isSidebar}}
@@ -114,6 +118,11 @@
     {{#unless hideControls}}
         {{#if isActor}}
             <div class="controls">
+                {{#if (eq type 'actor')}}
+                    <a data-action="viewActor" data-potential-adversary="{{categoryAdversary}}" data-adversary="{{item.uuid}}" data-tooltip='{{localize "DAGGERHEART.Tooltip.openActorWorld"}}'>
+                        <i class="fa-solid fa-globe"></i>
+                    </a>
+                {{/if}}
                 {{#if (eq type 'adversary')}}
                     <a data-action="viewAdversary" data-potential-adversary="{{categoryAdversary}}" data-adversary="{{item.uuid}}" data-tooltip='{{localize "DAGGERHEART.Tooltip.openActorWorld"}}'>
                         <i class="fa-solid fa-globe"></i>